html - 如何用一个占用额外空间的元素创建一个 行

Question

我试图在不使用表格的情况下在 html 中创建一个灵活的行，这样该行的元素之一会占用额外的水平空间。我这里有一个基本的解决方案，但看起来很尴尬。例如，按钮必须在 div 中的输入之前，以便所有内容都在同一行上，即使在页面上它看起来像是在输入之后。此外，当添加第二个按钮(不包括在我的示例中)时，事情会变得更加麻烦。有谁知道更好的方法来解决这个问题？这是一个 JSFiddle，我粘贴了下面的代码。一个有效的解决方案需要足够灵活，以便可以轻松地将更多固定宽度的元素添加到行中。请注意，在示例中，可以重新调整灰色框的大小，并且文本输入会自动扩展。 http://jsfiddle.net/jjfPK/8/

<div id="grayBox">
    <div id="searchbar">
      <button>Search</button>
      <input type="text"></input>
    </div>
</div>

<style = "text/css">
    #grayBox
    {
        width:400px;
        background-color:lightgray;
    }

    #searchbar
    {
        margin-right:70px;
        padding: 10px;        
    }

    #searchbar input
    {
        width:100%;
    }

    #searchbar button
    {
        float:right; 
        margin-right:-70px;
    }
</style>

Answer 1

尝试使用display: table。当您有一个需要表现得像表格的非表格数据的布局时，您应该使用它。 IE7 不支持，但 IE8+ 和所有其他主要浏览器都支持。

http://jsfiddle.net/5CBS4/

需要修改您的 html 以包含虚拟单元格的容器。

<div id="grayBox">
    <div id="searchbar">
        <div><input type="text" /></div>
        <div><button>Search</button></div>
        <div><button>Search</button></div>
        <div><button>Search</button></div>
    </div>
</div>​

CSS 应用表格、行和单元格样式。使用 > 定位直接后代。然后使用 first-of-type 使第一个单元格尽可能大。

#grayBox
{
    display:table;
    width:400px;
    height:400px;
    background-color:lightgray;
}

#searchbar
{
    display:table-row;
    margin-right:100px;
    padding: 10px;        
}

#searchbar > div { 
    display:table-cell; 
}

#searchbar > div:first-of-type { 
    width: 100%; padding: 0px 5px 0px 5px; 
}