如何在列表項目之間插入換行符

我正在創建HTML表單，並使用UL和LI來組織我的字段。每個LI裏面都有一個標籤和一個輸入。一些CSS之後做出LI顯示：inline-block的，我得到這樣的結果：如何在列表項目之間插入換行符

我在這個小提琴的例子：https://jsfiddle.net/cygv07px/

的問題是，我想這條街道領域在一個新的生產線，是這樣的：

我achievied，通過把<LI>之間的<br />元素，但這似乎不是一個優雅的解決方案，並且我不斷收到來自Visual Studio的驗證消息，稱我不能在LI中使用BR元素。

如何以更好的方式在街道字段（或名稱字段後面）指定換行符？

2017-01-03 Marlon

使用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>

來源

2017-01-03 13:09:10

媽，你快：d – VilleKoo

哈哈哈...永遠：P –

一種選擇是使用顯示塊和浮動。

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>

來源

2017-01-03 13:12:51 VilleKoo

我有一個稍微不同的解決方案。當您使用HTML <table>元素時，甚至不需要任何CSS來格式化它。它也避免了float，這在我的經驗中可能會導致問題。我的代碼是低於或在https://jsfiddle.net/9myL5rbk/。

label { 
 
    display: block; 
 
}

<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>

來源

2017-01-03 13:24:58 Zak

如何在列表項目之間插入換行符

回答

相關問題