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

Question

我正在尝试让一个 Input 和一个 Link 元素并排放置在 < strong>Div 元素。

我想要 Div 和 Link 来完全填充 Div 元素，因此您无法看到 Input 边缘周围的包含 Div 和 Link 元素。

但是，如果我将我的 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;}

有人可以解释为什么我的链接元素不能超过 27 像素而不落到下一行吗？我可以接受只有 27px 的宽度，我只是想从技术 Angular 理解为什么会发生这种情况。

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>

没有空白的更新 fiddle : http://jsfiddle.net/x6Mq5/

用 margin-left:-4px; 更新了 fiddle; http://jsfiddle.net/x6Mq5/1/