html - 尽管 block 中有空格,为什么在连续 block 之间发生换行?

标签 html css word-wrap

假设您要为您的输入创建一个带有标签的表单,并希望通过在每行上显示尽可能多的输入及其标签来使其以某种方式响应。为了做到这一点,我想到了自动空间换行:标签和输入之间没有空间,但每个组之间有空间

<body>
    <form>
        <label for="aa">AA</label><input type="text" name="aa" id="aa" />
        <label for="bb">BB</label><input type="text" name="bb" id="bb" />
        <label for="cc">CC</label><input type="text" name="cc" id="cc" />
        <label for="dd">DD</label><input type="text" name="dd" id="dd" />
        <label for="ee">EE</label><input type="text" name="ee" id="ee" />
        <label for="ff">FF</label><input type="text" name="ff" id="ff" />
    </form>
</body>

如您所见,由于换行,标签+输入的每个“组”之间都有一个空格。但这似乎不适用于自动换行,因为换行似乎几乎总是在输入和标签之间完成。我想要的是在空格处换行,而不是在标签和输入之间换行!

我做错了什么?虽然我知道将每个组包装在另一个元素中是可行的,但我希望我的代码尽可能简洁。我尝试了一些 CSS,但没能安排好。

预先感谢您的帮助!

最佳答案

没有任何额外标记的简单方法是使用 floatclear

label,
input {
    float: left;
}

label {
    clear: left;
}

Demo

关于html - 尽管 block 中有空格,为什么在连续 block 之间发生换行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31148123/

相关文章:

html - 如何在图像链接中环绕文本? HTML CSS

html - Firefox 网站内容超越边缘

javascript - 如何使用 Prototype new Element() 构造函数添加事件处理程序?

html - 检查元素时屏幕宽度和元素宽度不对齐?

python - 如何创建和写入 textiowrapper 和 readlines

text - 如何在 LaTeX 表格中换行文本?

javascript - 如何选择没有特定类的元素

html - 如何在我的网站上正确使用 Bootstrap ?

html - 仅将没有 html 的网页中的文本复制到 Gmail 正文电子邮件中

html - 如何在段落中使用填充突出显示长句子?