1

在当前的项目中，我在表单上有一个问题。表单中标签的字体大小可能高于默认值。如果我抬起它，那么右侧的输入必须垂直居中。

我看了一下 Bootstrap 和 Foundation，但两者都没有解决这个问题的方法。

<form action="" class="m-form">
 <ol>
   <li>
     <label for="sample">A Sample Label</label>
     <input type="text" id="sample" class="m-form__textfield" value="A Sample Input">
   </li>
 </ol>


.m-form {
  ol {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  label:first-child {
    box-sizing: border-box;
    display: block;
    float: left;
    padding: .25em 2em .25em 0;
    width: 50%;

    font-weight: bold;
    line-height: 1.5;
    text-align: right;
  }
  .m-form__textfield {
    box-sizing: border-box;
    float: left;
    padding: .5em;
    width: 50%;

    border: 1px solid #ccc;
    border-radius: 3px;
  }
}

}

演示：http: //jsfiddle.net/qSNH5/1/

你有一个简单的解决方案吗？

4

2 回答 2

1

问题是您正在使用em填充/边距，因此一旦增加font-size您也会增加填充/边距。

尝试为标签设置一个固定的顶部/底部填充，这应该会有所帮助。

更新：

如果要根据标签使输入居中，则需要使用一些技巧：

li{
 position: relative;

}

li input{
    height: 30px;
    position: absolute;
    top: 50%;
    margin-top: -15px;
}

见小提琴

于 2013-08-07T13:27:29.087 回答
1

使用 Vertical-Align 属性

我对您的 CSS 做了一些更改：

label:first-child {
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    padding: .25em 2em .25em 0;
    width: 40%;      
    font-weight: bold;
    line-height: 1.5;
    text-align: right;
}
.m-form__textfield {
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    padding: .5em;
    width: 50%;               
    border: 1px solid #ccc;
    border-radius: 3px;
}

而不是浮动你的元素，尝试使用display: inline-block然后应用vertical-align: middle属性。

请注意 % 宽度，因为 50% 的值可能会导致元素环绕到第二行，具体取决于其他因素，例如填充、边距、边框等。

演示：http: //jsfiddle.net/audetwebdesign/AhZFm/

于 2013-08-07T13:52:35.950 回答