0

HTML：

<p>
    <input type="radio" id="SQL:79" name="SQL" value="79" maxlength="300">
    <label for="SQL:79">Microsoft SQL Server 2012 Express - 64 bit</label>
</p>

相关CSS：

p {
   line-height:23px; 
   vertical-align:top;
   margin:0 0 8px 0;
   padding:0;
   clear:both
}
input {
   margin:0 5px 0 0; 
   padding:0; 
   height:23px;
}
input[type="radio"] {
   border:none; 
   background:none;
   vertical-align:text-bottom
}
label {
   vertical-align:top
}

我的输入和标签是精确的 23px 高，但是<p>是 28px :(

当我从输入中删除垂直对齐时，<p>减少到 25px；但仍然不是所需的 23px！

我已将 input[type=radio] 上的垂直对齐从 text-bottom 更改为plain bottom/top；这使得父 p 正好是 23px :)
PS：这行代码来自 HTML5 样板重置，所以要注意！

4

6 回答 6

1

将 p 的 line-height 降低到 19px 或添加 margin-bottom: -2px 到输入。

http://jsfiddle.net/EWfyM/

p {
   line-height:23px; 
   vertical-align:top;
   margin:0 0 8px 0;
   padding:0;
   clear:both
}
input {
   margin:0 5px 0 0; 
   padding:0; 
   height:23px;
   margin-bottom: -2px;
}
input[type="radio"] {
   border: none; 
   background:none;
   vertical-align:text-bottom
}
label {
   vertical-align:top
}

在此处输入图像描述

于 2013-10-08T13:27:57.193 回答
1

我知道这不能回答您“为什么？”的问题，但是使用萤火虫我可以通过更改单选按钮的高度来让您的段落高度显示为 23px。

这是我更改的 CSS：

input[type="radio"], input[type="checkbox"] {
box-shadow: 0 0 0;
height: 18px;
margin: 0 5px 0 0 !important;
padding: 0 !important;
}

请注意，我将您的更改height: 23px;为height: 18px. 我在网上找不到答案，但也许单选按钮本身有一些默认高度。

于 2013-10-08T14:19:15.357 回答
0

使用显示内联作品：

（我在这里使用了内联 css）

<p style="display:inline;margin:0 0 0px 0;padding:0;clear:both;">
   <input type="radio" value="79" id="SQL:79" name="SQL" maxlength="300" style="display:inline;margin:0 0px 0 0; padding:0; height:19px;border:none; background:none;vertical-align:middle;position:relative;top:-2px;">
   <label for="SQL:79" style="display:inline;">Microsoft SQL Server 2012 Express - 64 bit</label>
</p>

希望有帮助。

于 2013-10-08T13:35:51.747 回答
0

p 标签将根据内容大小进行扩展。如果需要，我们必须指定 p 标签的高度。

于 2013-10-08T13:41:55.633 回答
0

这是修改后的css（简化:)）：

p {
   line-height:23px; 
   vertical-align:top;
   margin:0 0 8px 0;
   padding:0;
   clear:both
}
input {
   margin:0; 
   padding:0; 
}
input[type="radio"] {
   border: none; 
   background:none;
}
label {
   vertical-align:baseline;
}
  1. 设置 input[type=radio] 的高度不能扩大它的视觉形状。所以我删除了高度。
  2. 当子元素（输入）显示为inline或inline-block时，设置父元素的line-height可以使子元素中心垂直对齐。但是您也可以使用vertical-align 垂直对齐子元素的顶部或底部。
于 2013-10-08T14:52:18.560 回答
0

我已将 input[type=radio] 上的垂直对齐从 text-bottom 更改为 plain bottom/top

于 2013-10-15T07:02:56.897 回答