在没有 html 标记的情况下输入后换行

发布于 2024-09-26 01:59:42 字数 352 浏览 3 评论 0原文

我正在尝试显示许多输入及其相应的标签。它们都是内联元素，我有一个可行的解决方案，在末尾添加一个 br 标签，这样

<label for="hello"></label>
<input id="hello" type="text" />
<br>
<label for="stackoverflow"></label>
<input id="stackoverflow" />

我想解决这个问题，而无需额外的 HTML 标记，即使用 CSS。做到这一点最简单的方法是什么？

我查看过与此类似的其他问题，但按行而不是按列对齐。

原文

I am trying to display a number of inputs and their corresponding labels. They are both inline elements, and I have a working solution with adding a br tag at the end like so

<label for="hello"></label>
<input id="hello" type="text" />
<br>
<label for="stackoverflow"></label>
<input id="stackoverflow" />

Id like to solve this without extraneous HTML markup, i.e with CSS. What is the easiest way to do this?

I have viewed other questions similar to this, but aligning by row instead of by column.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

如梦 2024-10-03 01:59:42

您可以将标签包裹在输入周围并将其显示为块：

<style>
  label { display: block; }
</style>

<label>
  Hello: <input name="hello">
</label>
<label>
  StackOverflow: <input name="stackoverflow">
</label>

请注意，执行此操作时，不需要使用 for="name" 属性。

另一种方法（如果您不希望标签包裹在输入周围）是将标签向左浮动：

<style>
  label { float: left; clear: left; }
</style>

但是，我通常更喜欢更多的标记，即连接 label 和input 到一个逻辑元素中，称为字段：

<div class="field">
  <label for="hello">Hello</label>
  <input name="hello">
</div>
<div class="field">
  <label for="stackoverflow">Stackoverflow</label>
  <input name="stackoverflow">
</div>

因为每个字段都是一个 div，所以它会自动显示为一个块，但您可以控制它也适用于各个领域。

You can wrap the labels around your inputs and display them as blocks:

<style>
  label { display: block; }
</style>

<label>
  Hello: <input name="hello">
</label>
<label>
  StackOverflow: <input name="stackoverflow">
</label>

Note that when you do this you don't need to use the for="name" attribute.

The other way (if you don't want the labels wrapped around your inputs) is to float the labels to the left:

<style>
  label { float: left; clear: left; }
</style>

However, I generally prefer a little more markup, something that connects the label and the input into one logical element, called a field:

<div class="field">
  <label for="hello">Hello</label>
  <input name="hello">
</div>
<div class="field">
  <label for="stackoverflow">Stackoverflow</label>
  <input name="stackoverflow">
</div>

Because each field is a div, it will display as a block automatically, but you can control it for individual fields as well.

回复收藏 0 原文

弥繁 2024-10-03 01:59:42

尝试为您的 input 和 label 元素设置 display:inline-block 。因此，您可以添加所有块元素特定的 css，例如 witdh 或 margin-bottom。

您还可以将 input 和 label 设置为 display:block 并仅将 margin-bottom 添加到输入。或者您可以反转它并在标签中添加 margin-top ;)

如果您想删除最后一个元素的边距，您可以使用 input:last-child {margin-bottom:0;}

input, label {display:block;}
input {margin-bottom:18px;}
input:last-child {margin-bottom:0;}

/* Or to be specific you can use the attribut-selector
   which only works on inputs with type="text"
*/
input[type="text"]:last-child {margin-bottom:0;}

Try to set display:inline-block for your input and label elements. So you can add all block element specific css like witdh or margin-bottom.

You can also set your input and label to display:block and add margin-bottom only to the the input. Or you can reverse it and add a margin-top to your labels ;)

If you want to remove the margin on the last element you can use input:last-child {margin-bottom:0;}

input, label {display:block;}
input {margin-bottom:18px;}
input:last-child {margin-bottom:0;}

/* Or to be specific you can use the attribut-selector
   which only works on inputs with type="text"
*/
input[type="text"]:last-child {margin-bottom:0;}

回复收藏 0 原文

~没有更多了~