html – 如何使用一个抓取额外空间的元素创建一行

概述我正在尝试在不使用表格的情况下在html中创建灵活的行,以便行的元素之一抓取额外的水平空间.我这里有一个基本的解决方案,但看起来很尴尬.例如,按钮必须位于div中的输入之前,以便所有内容都在同一行上,即使在页面上它看起来像是在它之后.此外,添加第二个按钮时,事情变得更加麻烦(我的示例中未包含).有谁知道更好的方法来解决这个问题？这是一个JSFiddle,我已粘贴下面的代码.有效的解决方案需要足够灵 我正在尝试在不使用表格的情况下在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>

解决方法 尝试使用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; }

总结

以上是内存溢出为你收集整理的html – 如何使用一个抓取额外空间的元素创建一行全部内容，希望文章能够帮你解决html – 如何使用一个抓取额外空间的元素创建一行所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。