0

Webページに2つのボタンを配置しようとしています。1つは左に、もう1つは右にフロートしています。両方のコマンドボタンには、複数行のスタイルのテキストが含まれています。以下は私の最新の試みです。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は、「buttonchoice1」クラスを適用したレイアウトの基礎となるh：buttonタグを認識していません。これらの「h：button」をdivでラップし（たとえば）、クラスを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 に答える