2016-09-26 49 views
2

我的代碼:https://jsfiddle.net/sf4g3v9n/讓表格填充寬度的其餘部分

我希望輸入填充剩餘空間。我已經搜索了很多網站,但找不到合適的答案。

重要提示:右側的文本是動態的,因此沒有絕對寬度。

我的HTML結構:

<div class="container"> 
    <form> 
    <div class="input-box"> 
     <input type="text" placeholder="search..." /> 
    </div> 
    </form> 
    <div class="selector"> 
    <p> 
     dynamic content 
    </p> 
    </div> 
</div> 

回答

2

您可以使用flexbox這樣做:

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.container { 
 
    width: 700px; 
 
    display: flex; 
 
} 
 

 
form { 
 
    float: left; 
 
    flex: 1; 
 
} 
 

 
form .input-box{ 
 
    width: 100%; 
 
    display: flex; 
 
} 
 

 
form input { 
 
    padding: 10px 15px; 
 
    font-size: 18px; 
 
    width: 100%; 
 
} 
 

 
.selector { 
 
    float: right; 
 
} 
 

 
.selector p { 
 
    border: 1px solid rgba(0, 0, 0, 0.1); 
 
    padding: 10px 15px; 
 
    font-size: 20px; 
 
}
<div class="container"> 
 
    <form> 
 
    <div class="input-box"> 
 
     <input type="text" placeholder="search..." /> 
 
    </div> 
 
    </form> 
 
    <div class="selector"> 
 
    <p> 
 
     dynamic content 
 
    </p> 
 
    </div> 
 
</div>

因爲要輸入填補剩餘的空間,一個flexbox是一個很自然的選擇,因爲這就是它的確切原因!

因此,這裏有我做你的代碼的更改:

  1. 首先,我做這 - 這使得forminput-box留在同一行了你的container一個Flexbox的。

    .container { 
        width: 700px; 
        display: flex; 
    } 
    
  2. 新增flex: 1form讓它延伸到剩餘的空間。

  3. Flexbox「彎曲」適用於您給它的容器的直接子代display: flex。所以你必須聲明你的內部div input-box也是一個彈性容器。

  4. 現在將input框的寬度設置爲100%,然後您就可以開始了!

乾杯!

+0

謝謝!很想看到你的解釋。工作完美順便! –

+0

@MaartenWolfsen補充說明..謝謝! – kukkuz

1

Flexbox,就可以做到這一點:

註釋解釋方法

Guide to Flexbox

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.container { 
 
    display: flex; 
 
    /* create flex-container */ 
 
    margin-bottom: 1em; 
 
} 
 
form { 
 
    flex: 1; 
 
    /* expand to as much width as is remaining */ 
 
} 
 
.input-box { 
 
    display: flex; 
 
    /* new inner flex-container */ 
 
} 
 
form input { 
 
    padding: 10px 15px; 
 
    font-size: 18px; 
 
    flex: 1; 
 
    /* expand to as much width as is remaining */ 
 
} 
 
.selector p { 
 
    border: 1px solid rgba(0, 0, 0, 0.1); 
 
    padding: 10px 15px; 
 
    font-size: 20px; 
 
}
<div class="container"> 
 
    <form> 
 
    <div class="input-box"> 
 
     <input type="text" placeholder="search..." /> 
 
    </div> 
 
    </form> 
 
    <div class="selector"> 
 
    <p> 
 
     Lorem ipsum dolor sit amet. 
 
    </p> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <form> 
 
    <div class="input-box"> 
 
     <input type="text" placeholder="search..." /> 
 
    </div> 
 
    </form> 
 
    <div class="selector"> 
 
    <p> 
 
     Lorem 
 
    </p> 
 
    </div> 
 
</div>

相關問題