html - CSS 响应式 HTML 表单

Question

我有这个 HTML 代码:

<h4>Company Details</h4>

<div>
    <label for="company">Company</label>

    <div>
        <input type="text" name="company" value="<?php echo $customer["company"]; ?>" />
    </div>
</div>

我想让文本输入和标签相互内联显示，然后随着屏幕变小将文本输入移动到标签下

Answer 1

有很多方法可以实现这一点。选择最适合您的元素的那个。我会使用 CSS 将包含输入的标签和 div 设置为“inline”或“inline-block”。然后，如果您需要将行折叠成两行，请使用媒体查询(请参阅最后一个代码片段)。

<h4>Company Details</h4>
<div class="input-group">
    <label for="company">Company</label>
    <div>
        <input type="text" name="company" value="<?php echo $customer["company"]; ?>" />
    </div>
</div>

// This will make them show inline occupying half the width
.input-group > label, .input-group > div{
    display: inline-block;
    width: 50%;
}

我有时会遇到行内 block 中额外像素的问题，我通常通过 float 方 block 或设置字体大小为零。

// This way the label and input float
.input-group {
    clear: both; // So the container doesn't collapse
}
.input-group > label, .input-group > div{
    float: left;
    width: 50%;
}

对于字体大小版本:

// This way the font size in the container is zero
.input-group {
    font-size: 0;
}
.input-group > label, .input-group > div{
    display: inline-block;
    width: 50%;
    font-size: 12px;
}

你的 div 会自动拉伸(stretch)到屏幕的 100%，所以你不需要媒体查询来设置它的宽度；它已经按原样响应。但是，如果您坚持要使用它们，或者需要它们，请同时添加:

@media (max-width: 500px) {
    .input-group > label, .input-group > div{
        display: block;
        float: none;
    }
}