CSS - 有兩個同軸輸入佔用的剩餘空間

我有以下HTML：CSS - 有兩個同軸輸入佔用的剩餘空間

<div id="holder"> 
    <span>Search for</span> 
    <input id="srchfor" /> 
    <span>near</span> 
    <input id="srchin" /> 
    <span>submit</span> 
</div>

內含div是固定的寬度。 3跨度的寬度將取決於字體大小。是否可以使兩個輸入寬度相同，以使它們的尺寸相同，並且它們消耗holder中的所有剩餘空間？或者這是否需要使用JavaScript？

編輯：我的目標是將5個元素全部放在一行上，而不是分成幾行。

來源

2011-08-25 Oliver

是啊，你需要JavaScript。或者你可以使用表格。表格非常適合佈局，表格不是邪惡的 - 我們在css之前沒有選擇。 – Sheepy

我懷疑我可能不得不使用一張桌子，但我真的不想。 – Oliver

那麼，如果支持的瀏覽器列表是最新的，我想象一個CSS雙列布局將工作。你可以用CSS做，我現在記得，但它很複雜。像創建具有相對位置和大小的虛擬框並將輸入放入其中。 – Sheepy

那麼，您可以將顯示類型從display: inline更改爲display: block以使它們填充空間。但我不知道內聯是否是一項要求。

來源

2011-08-25 10:28:06 Exelian

您必須爲span元素選擇固定寬度，並使用display：inline-block屬性，如this example。

來源

2011-08-25 10:31:33

感謝您的輸入，但這並不符合我的需求 - 我的目標是讓5個元素全部在同一行上。 – Oliver

這是一箇舊的帖子，但我碰到它，並認爲我會回答下一個人。這是一個可以解決這個問題的CSS/HTML代碼片段。它有點像HTML5 flexbox，但沒有HTML5或flexbox。您可以將寬度添加到任何2個部分所需的區域，第三個將填充剩餘的空區。

<style type="text/css"> 
    .form-group { 
     border: 1px solid black; 
     margin-bottom: 20px; 
     padding: 10px; 
     width: 75%; 
    } 

    .a { 
     float: right; 
     margin-left: 10px; 
     width: 30%; 
    } 

    .a input { 
     width: 100%; 
    } 

    .b { 
     float: left; 
     margin-right: 10px; 
     width: 33%; 
    } 

    .b input { 
     width: 100%; 
    } 

    .c { 
     display: block; 
     overflow: hidden; 
    } 

    .c input { 
     width: 100%; 
    } 
</style> 

<div id="wrapper"> 
    <div class="form-group"> 
     <span class="a"> 
      <label>Thing 1</label><br /> 
      <input type="text" /> 
     </span> 

     <span class="b"> 
      <label>Thing 2</label><br /> 
      <input type="text" /> 
     </span> 

     <span class="c"> 
      <label>Thing 3</label><br> 
      <input type="text" /> 
     </span> 
    </div> 

    <div class="form-group"> 
     <div class="a"> 
      <label>Thing 1</label><br /> 
      <input type="text" /> 
     </div> 

     <div class="b"> 
      <label>Thing 2</label><br /> 
      <input type="text" /> 
     </div> 

     <div class="c"> 
      <label>Thing 3</label><br> 
      <input type="text" /> 
     </div> 
    </div> 
</div>

來源

2013-09-06 14:41:30

CSS - 有兩個同軸輸入佔用的剩餘空間

回答

相關問題