Question

我正在玩bootstrap表单元素，并注意到输入类型文本的垂直对齐属性会以某种方式影响附近标签的位置。

顺便说一句，这个输入类型文本的边距为10px来自引导样式。

以下是代码：

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <style>
        input[type="text"] {
            vertical-align: baseline;
        }
    </style>
</head>
<body>
    <form action="">
        <span>Name</span>
        <input id="name" type="text">     
    </form>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

当我设置：

        input[type="text"] {
            vertical-align: baseline;
        }

我得到了正常的定位：

enter image description here

但是当我设置：

        input[type="text"] {
            vertical-align: top;
        }

我希望看到输入元素会被定位但是标签元素改变了它的位置

enter image description here

当我设置：

        input[type="text"] {
            vertical-align: bottom;
        }

我再次看到定位应用于标签元素：

enter image description here

我一直在想这样的事情会发生：

body元素将定义标签和输入元素所在的线框的行高。之后，标签和输入元素将根据其垂直对齐属性与body元素定义的线框定位。

但是在这里我看到以某种方式chaging输入元素的垂直对齐属性会影响label元素。有人可以解释为什么会这样吗？

Answer 1

如果从屏幕上删除所有其他元素，问题可能会更清楚。

使用默认设置vertical-align:baseline时，输入的基线会与跨度的基线对齐。我已经将元素的轮廓设置为红色，并将它们的y坐标对齐为蓝色。然后，当您将垂直对齐方式保留为默认值时，这就是线框的样子。

vertical-align:baseline

现在是否将两个元素对齐到顶部

vertical-align:top

或者到底部

vertical-align:bottom

总体布局保持不变。由于跨度而非输入都没有顶部边距，因此没有理由在此线框与前一个元素（或窗口顶部）之间创建任何空格。
请记住，跨度在屏幕上没有固定的位置。它在线盒中的垂直位置可以变化;就像在行框中的其他地方有更大的字体大小一样。

希望能够解决问题！

因此，原始问题的解决方案只是将一些上边距应用于输入。（或者，对于跨度，但是您也应该将其显示更改为内联块，因为默认情况下跨距不会执行边距。）

垂直对齐表单输入的奇怪行为

1 个答案: