Question

我正在创建一个HTML表单，我正在使用UL和LI来组织我的字段。在每个LI内部我有一个标签和一个输入。经过一些CSS使LI显示：inline-block，我得到了这个结果：

我在这个小提琴中有一个例子：https://jsfiddle.net/cygv07px/

问题是我希望街道字段在一个新的行中，如下所示：

我通过在<br />之间放置一个<LI>元素来实现，但这似乎不是一个优雅的解决方案，我不断从Visual Studio获取验证消息，说我不能拥有LI中的BR元素。

如何以更好的方式在街道字段之前（或在名称字段之后）指定换行符？

Answer 1

对每个奇怪的孩子使用float:left和清除。

li { 
 list-style: none; 
 float: left;
}
label { display: block }

li:nth-child(odd) { clear: left;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
     li { 
       list-style: none; 
       float: left;
     }
     label { display: block }

     li:nth-child(odd) { clear: left; }

    </style>
</head>
<body>
   <ul>
    <li>
      <label for="docNo">Doc Number</label>
      <input type="text" id="docNo" />
    </li>
    <li>
      <label for="name">Name</label>
      <input type="text" id="name" />
    </li>
    <li>
      <label for="street">Street</label>
      <input type="text" id="street" />
    </li>
    <li>
      <label for="houseNumber">House Number</label>
      <input type="text" id="houseNumber" />
    </li>
  </ul>
</body>
</html>

Answer 2

一种选择是使用显示块和浮点数。

li { 
  list-style: none; 
  display: block;
  float: left;
  margin: 0 1rem 1rem 0;
}

li:nth-child(odd) {
  clear: left;
}

label { display: block }

<ul>
  <li>
    <label for="docNo">Doc Number</label>
    <input type="text" id="docNo" />
  </li>
  <li>
    <label for="name">Name</label>
    <input type="text" id="name" />
  </li>
  <li>
    <label for="street">Street</label>
    <input type="text" id="street" />
  </li>
  <li>
    <label for="houseNumber">House Number</label>
    <input type="text" id="houseNumber" />
  </li>
  
</ul>

Answer 3

我的解决方案略有不同。当您使用HTML float元素时，您甚至不需要任何CSS来格式化它。它还避免了label { display: block; }，这在我的经验中会导致问题。我的代码位于https://jsfiddle.net/9myL5rbk/之下或之处。

＆＃13;

<table>
  <tr>
    <td>
      <label for="docNo">Doc Number</label>
      <input type="text" id="docNo" />
    </td>
    <td>
      <label for="name">Name</label>
      <input type="text" id="name" />
    </td>
  </tr>
  <tr>
    <td>
      <label for="street">Street</label>
      <input type="text" id="street" />
    </td>
    <td>
      <label for="houseNumber">House Number</label>
      <input type="text" id="houseNumber" />
    </td>
  </tr>
</table>

＆＃13;

APP

＆＃13;

Answer 4

以前的解决方案对我不起作用，因为我的框架中已经设置了一些类，并且得到了奇怪的解决方案，所以我得到了一个非常简单易用的解决方案！

如果您和ul水平显示并且想要获得br：只需添加一个额外的100％宽度的“空” li，这样它就不会显示，但是会产生一条折线！

ul {
  list-style-type: none;
}

li {
  float: left;
  padding-right: 20px;
}

<ul>
  <li>your li element  </li>
  <li>your li element  </li>
  <li style="width: 100%;"></li>
  <li>your li element  </li>
  <li>your li element  </li>
</ul>

Answer 5

在某些时候，我读到一个人应该尽可能避免浮动，因为这会破坏您可以使用该元素进行的许多其他操作。

我认为基于Flex-box的解决方案可能会更好。

请注意，不需要该容器。我只是用它来模拟页面上有一定空间的列表。

label {
  display: block;
}
ul {
  display:flex;
  flex-flow: wrap;
}
li {
  list-style: none;
  margin: 0; 
  padding: 0;
  width: 50%;
}

.container {
  width: 25rem;
  margin: 1rem auto;
}

<div class="container">   
    <ul>
        <li>
          <label for="docNo">Doc Number</label>
          <input type="text" id="docNo" />
        </li>
        <li>
          <label for="name">Name</label>
          <input type="text" id="name" />
        </li>
        <li>
          <label for="street">Street</label>
          <input type="text" id="street" />
        </li>
        <li>
          <label for="houseNumber">House Number</label>
          <input type="text" id="houseNumber" />
        </li>
      </ul>
</div>

如何在列表项之间插入换行符

5 个答案: