Question

我看不出我的代码有什么问题，但不幸的是下面的代码没有排队。我知道它与字体有关但超出我的想法。我知道我可以用浮点数做这个，但我想知道为什么内联块不起作用。

<html>
<head>
    <style type="text/css" media="screen">

        body {
            font-family: Verdana,Arial,Helvetica,Sans-serif;
            font-size: 10px;
        }

        .label, .input {
            display: inline-block;
            height: 30px;
            width: 235px;
            background-color: E4E4E4;
            border: 1px solid #FFFFFF;
            padding: 5px;
        }

    </style>

</head>

<body>

    <div class="label">Client</div>
    <div class="input"><input type="text" name="client"></div>

</body>

</html>

Answer 1

尝试使用vertical-align: bottom;。

Answer 2

首先，在定义背景颜色时错过了#，但主要问题是：

尝试使用vertical-align属性。将其设置为top，middle或bottom，看看是否有适合您的工作。

Answer 3

这些人是对的，垂直对齐是问题：

    .label, .input {
        display: inline-block;
    vertical-align: top;
        height: 30px;
        width: 235px;
        background-color: #E4E4E4;
        border: 1px solid #FFFFFF;
        padding: 5px;
    }

另外，您知道，这些内联元素对空白区域敏感，因此如果您不希望元素之间有空格，请执行以下操作：

<div class="label">Client></div><div class="input"><input type="text" name="client"></div>

关于内联块对齐的新手CSS

3 个答案: