0

我试图在网页上放置 2 个按钮，一个浮动到左侧，另一个浮动到右侧。两个命令按钮中都有多行样式的文本。下面是我最近的尝试。它似乎在 Firefox 中有效，但在 IE 8 中甚至没有关闭。有什么想法可以让它在两种环境中工作吗？谢谢。

CSS：

body {
    background-color: green;
}

.idxQuestion {
    font-size: 36;
    text-align: center;
}

.idxButtons {
    margin-top:60px;
    margin-left: auto;
    margin-right:auto;
    width:350px;
}

.buttonchoice1,.buttonchoice2
           {
    text-align: center;
    background:white;
    padding: 5px;
}

.buttonchoice1 {
    float:left; 
    border:5px solid red;
}

.buttonchoice2 {
    float:right;
    border:5px solid blue;
}   

.spanchoice1 {
    font-size: 30px;             
}

.spanchoice2 {
    font-size: 10px;             
}

HTML：

<div class="idxQuestion">
    <h1>Big Question?</h1>
</div>
<div class="idxButtons">
    <h:button class="buttonchoice1" onclick="option1?faces-redirect=true" >
        <h:outputText escape=false>
            <span class="spanchoice1">No</span><br />  
            <span class="spanchoice2">additional info 1</span> 
        </h:outputText>
    </h:button> 

    <h:button class="buttonchoice2" onclick="option2?faces-redirect=true" >
        <h:outputText>
            <span class="spanchoice1">Yes</span><br />  
            <span class="spanchoice2">additional info 2</span> 
        </h:outputText>
    </h:button> 

</div>

小提琴：http: //jsfiddle.net/MF23L/

4

3 回答 3

1

用这段代码替换您的代码：

<div class="idxButtons">
    <button class="buttonchoice1" onclick="option1?faces-redirect=true">
        <outputText escape=false>
           <span class="spanchoice1">No</span><br />  
           <span class="spanchoice2">additional info 1</span> 
        </outputText>
     </button>
    <button class="buttonchoice2" onclick="option2?faces-redirect=true">
        <outputText>
           <span class="spanchoice1">Yes</span><br />  
           <span class="spanchoice2">additional info 2</span> 
        </outputText>
     </button>
</div>
于 2012-10-01T18:00:23.830 回答
0

IE 无法识别您的 h:button 标签，您已将“buttonchoice1”类应用到该标签上，并且是您布局的基础。如果您要用 div 包装那些“h:button”（例如），并将类从 h:button 移动到新的包含 div，它应该可以工作。像这样：

<div class="idxButtons">
    <div class="buttonchoice1">
        <h:button onclick="option1?faces-redirect=true" >
        <h:outputText escape=false>
        <span class="spanchoice1">No</span><br />  
        <span class="spanchoice2">additional info 1</span> 
        </h:outputText>
        </h:button> 
    </div>
....
于 2012-10-01T17:59:38.173 回答
0

为什么不制作图像并使用<input type="image" alt="No, additional info 1" src="..." />它看起来一样？我不认为button应该是花哨的。

于 2012-10-01T18:00:37.170 回答