Question

我正在尝试在网页上放置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/

Answer 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>

Answer 2

IE无法识别您的h：button标记，您已将“buttonchoice1”类应用于该标记，并且是您的布局的基础。如果你用div（例如）包装那些“h：button”，并将类从h：按钮移动到新的包含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>
....

Answer 3

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

按钮元素内的多行样式文本

3 个答案: