Question

我正在尝试将输入和链接元素并排放在< strong> Div 元素。

我想要 Div 和 Link 来完全填充 Div 元素，因此您无法在输入的边缘看包含 Div 和链接元素。

但是，如果我设置 Link 元素的宽度，则 27px 的宽度会下降到下一行，即使我应该有容器 Div 左侧 31px 以适合 Link 元素。相关内容下面的HTML和CSS ......

HTML

<section>
        <img src="images/logo11w.png">
        <div name="search">
            <input>
            <a href="#"></a>
        </div>
    </section>

CSS

div[name="search"]{

display: block;
margin: auto;
height: 27px;
width: 572px;
background-color: green;}

input{

display: inline-block;
width: 541px;
height: 27px;
border-style: none;
background-color: yellow;
padding: 0;
margin: 0;}

div[name="search"]>a{
display: inline-block;
width: 27px;
height: 27px;
background-color: red;
margin: 0;}

有人可以解释为什么我的链接元素不能超过27px而不会掉到下一行吗？宽度只有27px我没关系，我只是想从技术的角度理解为什么会这样。

Answer 1

inline-block在渲染的html中显示实际布局中的空格...一个空格为4px。因此，如果您希望链接的宽度为31px，则需要提供margin-left:-4px或删除实际布局中的空白。

<section>
        <img src="images/logo11w.png">
        <div name="search">
            <input><a href="#"></a>
        </div>
    </section>

更新了没有空格的小提琴： http://jsfiddle.net/x6Mq5/

更新了margin-left:-4px;小提琴 http://jsfiddle.net/x6Mq5/1/

为什么我的div不能保持一致？

1 个答案: