버튼 요소 내의 여러 줄의 스타일이 지정된 텍스트

웹 페이지에 2 개의 버튼을 놓으려고합니다. 하나는 왼쪽으로, 다른 하나는 오른쪽으로 띄웁니다. 두 명령 단추에는 여러 줄의 스타일이 지정된 텍스트가 있습니다. 아래는 나의 최근 시도입니다. 그것은 파이어 폭스에서 작동하는 것,하지만 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/

출처

2012-10-01 user1341851

"h"태그의 출처는 어디입니까? – chipcullen

나는 그가 HTML 페이지에 직접 ASP.NET 코드를 붙여 넣고있는 것 같아. ** IE **가 무엇인지 알기 때문에 잘못 렌더링되고있다. 마크 업에서'h :'를 모두 제거한다. –

언젠가 나는 내가 CSS에서 'H'태그를 모르는 사람이 하나뿐입니다. hehe –

는이 코드 조각을 사용하여 코드를 바꿉니다 :

<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-01 18:00:23

대단히 감사합니다. – user1341851

버튼을 왼쪽 또는 오른쪽으로 띄우면 버튼이 떠 다니거나 정상적인 흐름이되지만 outputText는 표시되지 않으므로 텍스트가 버튼 밖에 있습니다. – user1341851

IE는 당신의 시간 인식되지

: 당신이를 적용한 버튼 태그를, "buttonchoice1"클래스는 레이아웃의 기초입니다. "h : button"을 div (예 :)로 감싸고 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> 
....

출처

2012-10-01 17:59:38 Mike

'h :'를 제거하십시오. –

예, h :를 삭제해도 작동합니다. – Mike

예, h를 제거합니다. 감사. – user1341851

왜 이미지를 만들어 <input type="image" alt="No, additional info 1" src="..." />는 그래서 같은 보일 것이다 사용하지? 나는 button이 멋지다고 생각하지 않는다.

출처

2012-10-01 18:00:37

'input type = image' 행위는 제출 버튼으로 사용됩니다. –

버튼 요소 내의 여러 줄의 스타일이 지정된 텍스트

답변

관련 문제