输入高度：23px使<p>高度：28px :( </p>

Question

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

当我从输入中删除vertical-align时，<p>减少到25px;但仍然不是理想的23px！

我已将输入[type = radio]上的vertical-align从text-bottom更改为plain bottom / top;这使得父p恰好是23px：）
PS：这行代码来自HTML5样板重置，所以要注意！

Answer 1

将p的行高移至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
}

Answer 2

我知道这不能回答你的问题“为什么？”，但是使用firebug我可以通过改变单选按钮的高度来显示你的段落高度为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。我无法在网上找到答案，但也许单选按钮本身有一些默认高度。

Answer 3

使用显示内联作品：

（我在这里使用了内联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>

希望有所帮助。

Answer 4

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

Answer 5

这是修改过的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. 设置输入[type = radio]的高度不能放大其视觉效果 形状。所以我删除了高度。
2. 当子元素（输入）的显示是内联或内联块时， 设置父元素的行高可以对齐子元素 元素中心垂直。但您也可以对齐子元素 垂直顶部或底部垂直对齐。

Answer 6

我已将输入[type = radio]上的vertical-align从text-bottom更改为plain bottom / top