라벨 안에서 단어 분리를 피하는 방법은 무엇입니까?

-1

나는 CSS 속성과 스타일 레이블을 오전하지만 문제는 모든 단어가 I가 작동 white-space:nowrap,float: left,display:inline-block,display:inline, 아무것도하지만, 같은 모든 속성을 시도라벨 안에서 단어 분리를 피하는 방법은 무엇입니까?

Withdraw 
money

이 방법을 보여주고있다 label.For 예 "Withdraw money" 내부의 새로운 라인에 위반됩니다! 하나입니다 색상 속성은 라벨 안에 텍스트 작동하지 않는 이유를 가지 더, 아무도 설명 할 수 내 코드는 다음과 같습니다 :

body, 
 
h1, 
 
h2, 
 
h3, 
 
p, 
 
td, 
 
quote, 
 
small, 
 
form, 
 
input, 
 
ul, 
 
li, 
 
ol, 
 
label { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
body { 
 
    margin-top: 20px; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    color: #51555C; 
 
    height: 100%; 
 
    font-size: 11px; 
 
} 
 
/* Form styles */ 
 

 
input, 
 
select { 
 
    padding: 3px; 
 
    color: #333333; 
 
    border: 1px solid #96A6C5; 
 
    margin-top: 2px; 
 
    width: 200px; 
 
    font-size: 14px; 
 
} 
 
select { 
 
    width: auto; 
 
    padding: 2px; 
 
} 
 
.formline { 
 
    padding: 3px; 
 
} 
 
label { 
 
    font-size: 14px; 
 
    display: block; 
 
    text-align: left; 
 
    white-space: nowrap; 
 
    color: #203360; 
 
} 
 
table { 
 
    width: 400px; 
 
} 
 
td { 
 
    font-size: 11px; 
 
} 
 
.input-container { 
 
    padding: 8px; 
 
} 
 
#div-regForm, 
 
.registered { 
 
    border: 3px solid #eeeeee; 
 
    padding: 15px; 
 
    background: url(images/bg.jpg) repeat-x #999933; 
 
    color: #203360; 
 
    margin: 15px auto 40px auto; 
 
    width: 400px; 
 
} 
 
.form-title, 
 
.form-sub-title { 
 
    font-size: 40px; 
 
    font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif; 
 
    font-size: 20px; 
 
    font-weight: bold; 
 
} 
 
.form-sub-title { 
 
    font-weight: normal; 
 
    padding: 6px 0 15px 0; 
 
}

<div id="div-regForm"> 
 
    <div class="form-title">Withdraw money</div> 
 
    <table> 
 
    <tbody> 
 
     <tr> 
 
     <td> 
 
      <label for="fname" style="color: #990000">Withdraw address</label> 
 
     </td> 
 
     <td> 
 
      <div class="input-container"> 
 
      <input name="email" id="email" type="text" /> 
 
      </div> 
 
     </td> 
 
     </tr> 
 

 

 
     <tr> 
 
     <td> 
 
      <label for="fname" style="color: #990000">Amount</label> 
 
     </td> 
 
     <td> 
 
      <div class="input-container"> 
 
      <input name="amount" id="amount" type="text" /> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 

 
    </table> 
 

 
</div>

출처

2014-12-07 user2252617

CSS에있는 – Lal

의 'white-space : nowrap;'에'white-space : nowrap;'을 추가하십시오. – Lal

@Lal, OP는 이미 시도한 것으로 명시되어 있으며 이미 그의 코드에서이를 보여주고 있습니다. – Sparky

'Withdraw Money'가 div에있는 것 같습니다. word-break : keep-all을 적용 해보십시오. div에. div에 흰색 공백이 누락 된 것처럼 보입니다. nowrap;

또한 divs '를 확인하고'최대 너비 및 최대 너비 '라는 라벨을 지정하십시오. 여기서도 단어 나누기를 적용 해 볼 수 있습니다.

나는 이것도 도움이 될지 모르겠다. 나는 지금 웹 개발을 배우고 있으며, 내 웹 사이트와 많은 것들을 도왔다. 그런 것들이 나를 도왔다.

출처

2014-12-07 16:23:57 Burbanana

-1

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title></title> 
    <style> 
     /* Page styles */ 

     body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{ 
      margin:0px; 
      padding:0px; 
     } 

     body{ 
      margin-top:20px; 
      font-family:Arial, Helvetica, sans-serif; 
      color:#51555C; 
      height:100%; 

      font-size:11px; 
     } 


     /* Form styles */ 

     input,select{ 
      padding:3px; 
      color:#333333; 

      border:1px solid #96A6C5; 
      margin-top:2px; 
      width:200px; 
      font-size:14px; 
     } 

     select{ 
      width:auto; 
      padding:2px; 
     } 

     .formline{ 
      padding:3px; 
     } 

     label{ 
      font-size:14px; 

      display:block; 
      text-align:left; 
      white-space:nowrap; 
      color:#203360; 
     } 

     table{ 
      width:400px; 
     } 

     td{ 
      font-size:11px; 

     } 

     .input-container{ 
      padding:8px; 

     } 


     #div-regForm,.registered{ 
      border:3px solid #eeeeee; 
      padding:15px; 

      background:url(images/bg.jpg) repeat-x #999933; 
      color:#203360; 
      margin:15px auto 40px auto; 
      width:400px; 
     } 

     .form-title, 
     .form-sub-title{ 
      font-size:40px; 

      font-family:"Lucida Grande",Tahoma,Verdana,Arial,sans-serif; 
      font-size:20px; 
      font-weight:bold; 
     } 

     .form-sub-title{ 
      font-weight:normal; 
      padding:6px 0 15px 0; 


     } 
    </style> 
</head> 
<body> 
<div id="div-regForm"> 
    <div class="form-title">Withdraw money</div> 
    <table> 
     <tbody> 
     <tr> 
      <td><label for="fname" style="color: #990000">Withdraw address </label></td> 
      <td><div class="input-container"><input name="email" id="email" type="text" /></div></td> 
     </tr> 

     <tr> 
      <td><label for="fname" style="color: #990000">Amount</label></td> 
      <td><div class="input-container"><input name="amount" id="amount" type="text" /></div></td> 
     </tr> 
     </tbody> 

    </table> 

</div> 
</body> 
</html>

방금 복사하여 코드를 붙여 넣었습니다. 그것은 단순히 작동합니다. (IE11, Chrome 및 Firefox에서 테스트 됨) 브라우저 버전을 확인하십시오.

출처

2014-12-07 16:31:37 SanPanthera

라벨 안에서 단어 분리를 피하는 방법은 무엇입니까?

답변

관련 문제