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 - 有两个同轴输入占用的剩余空间

回答

相关问题