Html 如何在文本框中添加垂直线以分隔元素_Html_Css

Html 如何在文本框中添加垂直线以分隔元素

html css

Html 如何在文本框中添加垂直线以分隔元素,html,css,Html,Css,我为一个简单的表单编写了以下CSS和HTML代码，但是，我无法获得将文本与单选按钮分开的垂直线，目前，我只是使用正文中的“|”将其分开，但它看起来不太好。如何使垂直线从文本框的顶部一直连接到底部 <!DOCTYPE html> <html> <head> <style> .box1 { width: 300px; height: 20px; padding: 5px; border: 1px solid black; margin: 0; floa

我为一个简单的表单编写了以下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>

您需要创建一个表，并在其中放置html输入、标签。

您还需要将CSS样式添加到表格中，以实现更好的可视化。

您可以将单选按钮包装到div元素中，并在左右两侧添加边框

.box1{ 高度：20px；填充物：5px；边框：1px纯黑；保证金：0；浮动：左 } 输入[类型=收音机]{ 显示：内联； } .分离机{ 显示：内联块；左边框：1px实心000；右边框：1px实心000；填充：0.2米； } 上下向上的向下

在这种情况下，我个人不会在布局中使用表元素，除非我在表中呈现一组数据，然后它会应用，因为它不是语义的。相反，flexbox可以轻松处理此问题

display: flex;

.box1表格{ 宽度：300px；边框：1px纯黑；保证金：0；显示器：flex； } 上校{ 显示：内联块；右边框：1px纯黑；填充物：5px； } 上校：最后一个孩子{ 边界权：无； } .col.输入控制{ 右边填充：20px； } 上下向上的向下

你为什么不用桌子呢？而且代码不干净。放一个网页的模型，我们将帮助更好的code@HoussemBdr你需要什么样的模型？不过，我确实想学习如何编写更好的代码。好吧，不错，这似乎是可行的，现在如果我想在每个部分之间添加更多的空间，该怎么办？例如，我希望在上下文本后增加间距。Flexbox将根据其内容宽度将其子元素隔开。还有其他方法可以通过调整内容来控制这一点。因此，您可以做的一件事是在中间框中添加填充。因此，我更新了演示，例如在单选按钮上添加了padding right:20px。