입력 텍스트가 남아있는 공간을 가득 채우십시오.

Question

저는 한 시간 정도 그렇게보고 있습니다. 그리고 나는 내가해야할 일을 찾아내는 것처럼 보인다. 내가 원하는 것은 로그인 양식입니다. 스팬과 입력을 서로 옆에 놓기를 원합니다. 입력이 전체 크기를 채워야하는 곳입니다.

<div id="login_div"> 

<form> 

    <ul id="login_nav"> 
     <li> 
      <span class="login_span">Username</span> 
      <input class="login_input" type="text" name="username" /> 

     </li> 

     <li> 
      <span class="login_span">Password</span> 
      <input class="login_input" type="password" name="password"/> 
     </li> 

     <li> 
      <input type="submit" value="Login" /> 
     </li> 

    </ul> 

</form> 

가 <li>이 login_div의 전체 폭되어야하는, 500 픽셀을 말할 수 : 이 내 코드입니다. 스팬에는 특정 너비가 있으며, 100px라고 말할 수 있습니다. 그런 다음 나머지 공간을 얻기 위해 입력을 원합니다. 폭을 하드 코딩하지 않고이 모든 것을 달성하고 싶습니다.

아이디어가 있으십니까?

Answer 1

당신은 float 및 레이아웃 propeties를 사용할 수 있습니다. 귀하의 input을 하나의 요소에 배치하십시오.

---

DEMO

귀하의 span가 label해야하고, input가 span에 싸여 경우가 label floatting을 가질 수 있습니다.

span (또는 다른 태그)은 레이아웃이 트리거되면 모든 공간을 사용할 수 있으므로 ** 요소를 떠 다니는 데 신경을 씁니다.

이 시점에서

, 당신은 단지 남아있는 모든 공간을 채우기 위해 input에 width: 100%을 설정해야합니다 :

<div id="login_div"> 
<form> 
    <ul id="login_nav"> 
     <li> 
      <label class="login_span">Username</label> 
      <span class="login_span"><input class="login_input" type="text" name="username" /></span> 
     </li> 
     <li> 
      <label class="login_span">Password</label> 
      <span class="login_span"><input class="login_input" type="password" name="password"/></span> 
     </li> 
     <li>   
       <input type="submit" value="Login" /> 
     </li> 

    </ul> 
</form> 

및 기본 CSS : 리터는 CSS3의 CALC 함수를 시도

label{ 
    float:left; 
    width:100px;/* option, whatever */ 
    } 
span { 
    display:block; 
    overflow:hidden;/* triggers layout, so doesnt show beneath float element */ 
    margin-right:1em;/* option, whatever */ 
} 
span input { 
    width:100%;/* use all space avalaible */ 
    box-sizing:border-box;/* use prefix where needed */ 
} 

Answer 2

는 폭을 하드 코딩하지 않고 작업을 수행하려면 :

#login_nav li { display: table; width: 100%; } 
#login_nav li span, 
#login_nav li input { display: table-cell; } 

Answer 3

? https://developer.mozilla.org/en-US/docs/Web/CSS/calc

.login_span {width:100px; display:inline-block; } 
.login_input {width:calc(100% - 120px); display:inline-block;} 

바이올린 : http://jsfiddle.net/bW3ak/