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

我对于简单的表单有以下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

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

回答

相关问题