Question

当在一行中的元素上设置相同的行高，高度和框大小：border-box时，我希望它们能够正确对齐（在基线和框中）。

没有运气：对于某些输入/跨度和/或带边框/无边框的组合，对齐似乎总是偏离一个像素。

＆＃13;

input, span {
    display: inline-block;
    box-sizing: border-box;
    padding: 0;
    height: 22px;
    line-height: 22px;
    
    border: none;
    background-color: gray;
   
    font-family: Arial, sans-serif;
    font-weight: normal;
    font-size: 14px;
    
    width: 40px;
}
input {
    background-color: #A6A6A6;
}

.border {
    border: 1px solid black;
}

.vmiddle {
    vertical-align: middle;
}


p {
    margin: 5px;
}

＆＃13;

<h4>Two spans</h4>
One span has border - fail...
<p><span>_asd_</span><span class="border">_asd_</span></p>
One span has border - fail...
<p><span class="border">_asd_</span><span>_asd_</span></p>
Both spans have border - success
<p><span class="border">_asd_</span><span class="border">_asd_</span></p>

<h4>One input, one span - not the same</h4>
No borders - success
<p><input type="text" value="_asd_"/><span>_asd_</span></p>
span has border - fail...
<p><input type="text" value="_asd_"/><span class="border">_asd_</span></p>
input has border - success ...
<p><input type="text" value="_asd_" class="border"/><span>_asd_</span></p>
Both elements have border - fail :(
<p><input type="text" value="_asd_" class="border"/><span class="border">_asd_</span></p>
vertical-align: middle messes up baseline alignment
<p><input type="text" value="_asd_" class="border vmiddle"/><span class="border vmiddle">_asd_</span></p>

＆＃13;

（在Chrome中测试 - 在其他浏览器中似乎有所不同）

我错过了一些明显的东西，还是没有好的通用解决方案？我不想使用填充，因为它带来了一系列挑战。

似乎基线上方/下方的像素分布不同，具体取决于元素类型以及元素是否具有边框。我可以理解混合边界的情况，但是输入的行为与span的行为方式并不相同。（参见span-input，两者都有边框）

Answer 1

你的盒子太高了。

＆＃13;

input, span {
    display: inline-block;
    box-sizing: border-box;
    padding: 0;

    height: 24px; /* Note this correction */
    line-height: 22px;
    background-color: gray;
   
    font-family: Arial, sans-serif;
    font-weight: normal;
    font-size: 14px;
    
    width: 40px;
    border: 1px solid black;
    vertical-align: middle;
}
input {
    background-color: #A6A6A6;
}

＆＃13;

<h4>One input, one span - the same ;-)</h4>
vertical-align: middle messes up baseline alignment

<p>
  <input value="_asd_" type="text">
  <span>_asd_</span>
</p>

＆＃13;

Answer 2

确定，

在我看来，这段代码解决了你的问题。我只是使用了背景颜色相同的边框。

谢谢你和再见，
贾科莫

input, span {
    display: inline-block;
    box-sizing: border-box;
    padding: 0;
    height: 24px;  /* First correction */
    line-height: 22px;
    
    border: none;
    background-color: gray;
   
    font-family: Arial, sans-serif;
    font-weight: normal;
    font-size: 14px;
    
    width: 40px;
}
input {
    background-color: #A6A6A6;
}

.border {
    border: 1px solid black;
}

.border2 {
    border: 1px solid gray; /* Second correction */
}

.vmiddle {
    vertical-align: middle;
}


p {
    margin: 5px;
}

<h4>Two spans</h4>
One span has border - fail...
<p><span class="border2">_asd_</span><span class="border">_asd_</span></p>
One span has border - fail...
<p><span class="border">_asd_</span><span class="border2">_asd_</span></p>
Both spans have border - success
<p><span class="border">_asd_</span><span class="border">_asd_</span></p>

<h4>One input, one span - not the same</h4>
No borders - success
<p><input type="text" value="_asd_"/><span class="border2">_asd_</span></p>
span has border - fail...
<p><input type="text" value="_asd_"/><span class="border">_asd_</span></p>
input has border - success ...
<p><input type="text" value="_asd_" class="border"/><span class="border2">_asd_</span></p>
Both elements have border - fail :(
<p><input type="text" value="_asd_" class="border"/><span class="border">_asd_</span></p>
vertical-align: middle messes up baseline alignment
<p><input type="text" value="_asd_" class="border vmiddle"/><span class="border vmiddle">_asd_</span></p>

使用线高度对盒子和基线进行稳健的垂直对齐？

2 个答案: