Question

我在单选按钮之间有大约30px的垂直空间。将margin-top和margin-bottom设置为0px无效。如何消除垂直空间？

＆＃13;

body {
  margin: 2em;
  font-family: Arial, Helvetica, sans-serif;
}

input[type="radio"] {
  opacity: 0;
}

input[type="radio"]+label {
  cursor: pointer;
  border: 1px solid #ccc;
  background: #efefef;
  color: #aaa;
  border-radius: 3px;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0);
  display: block;
  width: 200px;
  height: 40px;
  padding-left: 20px;
  margin-top: 0px;
  margin-bottom: 0px;
}

input[type="radio"]:checked+label {
  background: #777;
  border: 1px solid #444;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
  color: white;
  margin-top: 0px;
  margin-bottom: 0px;
}

＆＃13;

<input id="Radio1" name="Radios" type="radio">
<label for="Radio1">I am option1</label>
<input id="Radio2" name="Radios" type="radio" value="Option 2">
<label for="Radio2">I am option2</label>
<input id="Radio3" name="Radios" type="radio" value="Option 3">
<label for="Radio3">I am option3</label>

＆＃13;

View on JSFiddle

Answer 1

如果您的目的是隐藏单选按钮本身并且只显示标签，那么只需应用position: absolute将其从页面流中删除：

input[type="radio"] {
    opacity: 0;
    position: absolute;
}

https://jsfiddle.net/99b6pbz7/

Answer 2

将其从流程中移除（绝对） https://jsfiddle.net/0d227oj6/1/

＆＃13;

body {
  margin: 2em;
  font-family: Arial, Helvetica, sans-serif;
}

input[type="radio"] {
  opacity: 0;
  position:absolute;/* removed from the flow */
}

input[type="radio"]+label {
  cursor: pointer;
  border: 1px solid #ccc;
  background: #efefef;
  color: #aaa;
  border-radius: 3px;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0);
  display: block;
  width: 200px;
  height: 40px;
  padding-left: 20px;
  margin-top: 0px;
  margin-bottom: 0px;
}

input[type="radio"]:checked+label {
  background: #777;
  border: 1px solid #444;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
  color: white;
  margin-top: 0px;
  margin-bottom: 0px;
}

＆＃13;

<input id="Radio1" name="Radios" type="radio">
<label for="Radio1">I am option1</label>
<input id="Radio2" name="Radios" type="radio" value="Option 2">
<label for="Radio2">I am option2</label>
<input id="Radio3" name="Radios" type="radio" value="Option 3">
<label for="Radio3">I am option3</label>

＆＃13;

Answer 3

只需隐藏实际的单选按钮。

input[type="radio"] {
  display: none;
}

如何摆脱单选按钮垂直边距？

3 个答案: