我有以下用于简单表单的 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>
在这种情况下，我个人不会使用表格元素进行布局(除非我在表中呈现一堆数据，然后它适用(，因为它不是语义的。相反，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>你需要创建一个表格，并在里面输入html输入，标签。
此外，您还需要将CSS样式添加到表中以获得更好的可视化效果。
您可以将单选按钮包装到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>