Question

我可以以某种方式将单选按钮放在div外面并同时在体宽之外吗？

<body>
<div class='container'>
<div class='box'>
<form>
  <input type="radio" name="points" value="1">
  <input type="radio" name="points" value="-1">
</form>
  <div class='middle'>just a div</div>
</div>
</body>

我最好使用某种css来显示div的左右两边。

我为此创造了一个小提琴：https://jsfiddle.net/qhatn0a8/

我尝试过使用css left：-100px;但如何在另一个按钮上使用css？

Answer 1

我必须阅读两次才能理解预期的结果。

您可以使用position：relative＆amp;绝对。但无论如何，您应该使用label（及其属性for），以便每个输入都与其文字说明相关联。

关于位置的想法是将输入和文本包装在标签内：

＆＃13;

body {
  width: 200px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
}

.box {
  background-color: grey;
  padding: 10px;
  margin-bottom: 10px;
  position:relative;/* added for absolute labels */
  /* height removed , seems not needed here */
}

.middle {
  background-color: red;
}

input[type="radio"] {
  margin-right: 10px;
}
label {/* use coordonate so no need to size them */
  position:absolute;
  right:100%;
  margin:0 1em;
  white-space:nowrap;
}
label + label {
  right:auto;
  left:100%;
}

＆＃13;

<body>
  <div class='container'>
    <div class='box'>
      <form>
        <label>
          <input type="radio" name="points" value="1">point1</label>
        <label>
          <input type="radio" name="points" value="-1">point2</label>
      </form>
      <div class='middle'>just a div</div>
    </div>
    <div class='box'>
      <form>
        <label>
          <input type="radio" name="points" value="1">point1</label>
        <label>
          <input type="radio" name="points" value="-1">point2</label>
      </form>
      <div class='middle'>just a div</div>
    </div>
    <div class='box'>
      <form>
        <label>
          <input type="radio" name="points" value="1">any text for point1</label>
        <label>
          <input type="radio" name="points" value="-1">point2</label>
      </form>
      <div class='middle'>just a div</div>
    </div>
    <div class='box'>
      <form>
        <label>
          <input type="radio" name="points" value="1">point1</label>
        <label>
          <input type="radio" name="points" value="-1">point2 or any text</label>
      </form>
      <div class='middle'>just a div</div>
    </div>
  </div>
</body>

＆＃13;

注意：按钮和文字可以覆盖其他内容或离开屏幕，因为在绝对位置，它们不在流量中;）

https://jsfiddle.net/qhatn0a8/3/

Answer 2

在输入周围添加标签，然后将css添加到它们。

表格位置：相对，输入绝对;

body {
  width: 200px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
}
.box {
  background-color: grey;
  padding: 10px;
  margin-bottom: 10px;
  height: auto;
}
.middle {
  background-color: red;
}
input[type="radio"] {
  margin: 0 10px 0 10px;
}
.box label:first-child {
  position: absolute;
  right:100%;
  margin-right:10px;
}
.box label:last-child {
  position: absolute;
  left: 100%
}
.box form {
  position: relative;
}
label{
  white-space:nowrap;
    margin: 1%
  }

<div class='container'>
  <div class='box'>
    <form>
      <label>
        <input type="radio" name="points" value="1">point1</label>
      <label>
        <input type="radio" name="points" value="-1">point2
        <br>
      </label>
    </form>
    <div class='middle'>just a div</div>
  </div>

中心收音机按钮在div周围但外面

2 个答案: