Question

我已经敲了几个小时试图解决这个问题。为什么在this demo中，文本框向下移动了一点而不是与蓝框相同的行？提前致谢！

编辑：对不起，如果我没有说清楚：文本框的顶部应该与蓝框的顶部对齐。

Answer 1

在我看来，有一些Javascript可以确保文本框始终与视口一样宽（或接近它）。之后，它是简单的换行，确保文本框位于下一行。

Answer 2

更新：关于看似“错误”的垂直位置。

您必须将margin-top:6px;margin-bottom:0px;应用于范围才能解决问题（请参阅http://jsbin.com/eciyib/8 ）。默认情况下，span的上边距和下边距为10px，由#toolbar > *选择器定义。 <input>元素的上下边距仅为6px，如#url选择器所指定。

您尚未为width元素定义div#toolbar属性。见下文。当视口小于1690px时，输入元素将向下移动以适合。

JSBin：http://jsbin.com/eciyib/7/

div#toolbar   <missing width property>
    span      margin-left: 10px; margin-right: 5px; width: 22px;    total=  37px
    input#url margin-left: 5px; margin-right: 10px; width: 1228px;
              border-left-widt: 5px; border-right-width:5px         total=1553px
                                                                    total=1690px

进一步解释：

元素的左右边距为5px，由于#toolbar > * {margin:10px 5px;}
#toolbar > *:first-child和#toolbar > *:last-child选择器会将子项的左右边距更改为10px。
因此，两个元素的水平边距为15px
输入元素的固定宽度为1228px，内联定义
输入元素从浏览器继承5px的左右边框。

Answer 3

您的输入太宽而无法放入同一行，并且一条规则中的边距就是这样定位：

#toolbar > * {
    margin: 10px 5px;
}

为什么我的css将文本框向下移动到下一行？

3 个答案: