Question

我有一个简单表单的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>

Answer 1

在这种情况下，我个人不会使用表格元素进行布局（除非我在表格中渲染一堆数据，然后才适用），因为它不是语义。相反，flexbox可以轻松处理这个问题。

display: flex;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

你需要创建一个表，并在里面输入html输入，标签此外，您还需要将CSS样式添加到表中以获得更好的可视化效果。

Answer 3

您可以将radiobuttons包装成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>

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

3 个答案: