如何在文本框中添加垂直線來分隔元素

我對於簡單的表單有以下CSS和HTML代碼，但是，我不能獲取將我的文本從我的單選按鈕中分離出來的垂直線，目前，我只是使用'|'在身體分開它，但它不好看。我怎樣才能讓垂直線從文本框的頂部連接到底部？如何在文本框中添加垂直線來分隔元素

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.box1 { 
width: 300px; 
height: 20px; 
padding: 5px; 
border: 1px solid black; 
margin: 0; 
float: left 
} 

input[type=radio] { 
    display: inline; 
} 


</style> 
</head> 
<body> 


<div class="box1"> 

<form method="GET" action="." target="new"> 
Up Down | 
<input type="radio" name="option" id="r1" value="1" /> 
<label for="r1">Up</label> 
<input type="radio" name="option" id="r2" value="2" /> 
<label for="r2">Down</label> 
| 
<input type="submit" /> 
</form> 
</div> 
</body> 
</html>

來源

2017-08-04 kkmoslehpour

你爲什麼不使用一個表？而且該代碼不乾淨。把頁面的模型，我們將幫助更好的代碼 –

@HoussemBdr你需要什麼模型？不過，我確實想學習如何編寫更好的代碼。 – kkmoslehpour

我個人在這種情況下不會使用佈局表格元素（除非我在表格中呈現一組數據，然後它適用），因爲它沒有語義。相反，flexbox可以輕鬆應對。

display: flex;

.box1 form { 
 
    width: 300px; 
 
    border: 1px solid black; 
 
    margin: 0; 
 
    display: flex; 
 
} 
 

 
.col { 
 
    display: inline-block; 
 
    border-right: 1px solid black; 
 
    padding: 5px; 
 
} 
 

 
.col:last-child { 
 
    border-right: none; 
 
} 
 

 
.col.input-control { 
 
    padding-right: 20px; 
 
}

<div class="box1"> 
 

 
    <form method="GET" action="." target="new"> 
 
    <label class="col">Up Down</label> 
 
    <span class="col input-control"> 
 
     <input type="radio" name="option" id="r1" value="1" /> 
 
     <label for="r1">Up</label> 
 
     <input type="radio" name="option" id="r2" value="2" /> 
 
     <label for="r2">Down</label> 
 
    </span> 
 
    <span class="col"> 
 
     <input type="submit" /> 
 
    </span> 
 
    </form> 
 
</div>

來源

2017-08-04 22:06:36 flyer

好吧，這似乎工作，現在如果我想要在每個部分之間添加更多的空間？例如，我想在「向下」文本之後有更多的間距。 – kkmoslehpour

Flexbox將根據其內容寬度分隔其子元素（還有其他方法可以用例如justify-content來控制它）。所以你可以做的一件事是添加填充中間框。所以我更新了演示，例如在單選按鈕上填充了正確的20px。 – flyer

您需要創建一個表，並在裏面放入html輸入，標籤。
此外，您還需要將CSS樣式添加到表中以獲得更好的可視化效果。

來源

2017-08-04 21:32:28

您可以將您的單選按鈕包裝到div元素中，並向左側和右側添加邊框。

https://jsfiddle.net/krbp8tx7/

.box1 { 
 
    height: 20px; 
 
    padding: 5px; 
 
    border: 1px solid black; 
 
    margin: 0; 
 
    float: left 
 
} 
 

 
input[type=radio] { 
 
    display: inline; 
 
} 
 

 
.separateradios { 
 
    display: inline-block; 
 
    border-left:1px solid #000; 
 
    border-right:1px solid #000; 
 
    padding: 0 0.2em; 
 
}

<body> 
 
    <div class="box1"> 
 

 
    <form method="GET" action="." target="new"> 
 
     Up Down 
 
     <div class="separateradios"> 
 
     <input type="radio" name="option" id="r1" value="1" /> 
 
     <label for="r1">Up</label> 
 
     <input type="radio" name="option" id="r2" value="2" /> 
 
     <label for="r2">Down</label> 
 
     </div> 
 
     <input type="submit" /> 
 
    </form> 
 
    </div> 
 
</body>

來源

2017-08-04 21:40:55 Auskennfuchs

如何在文本框中添加垂直線來分隔元素

回答

相關問題