Question

我正在制作一个表单，其中我的总宽度为800像素。现在我希望在我的表单中，firstname和lastname位于最顶层，但在同一行。我的HTML代码如下：

<input type="text" name="firstname" placeholder="First Name" class="first">
<input type="text" name="lastname" placeholder="Last Name" class="first">

我的CSS代码如下：

.first{
    border:1px solid #E5E5E4;
    margin-top: 10px;
    height: 30px;
    text-align: left;
    display: inline-block;
    width: 50%;
    padding: 10px;
    font-size: 1em;
}

但这些文字输入的内容不同。我搜索了很多问题但是我没有得到我的问题的确切答案，只能在一行中获得它们。前面描述的解决方案都没有能够解决问题。请告诉解决方案，将它们组成一行。

Answer 1

Flex 在这类事情上非常棒。兼容回IE10。

＆＃13;

.inputs {
  display: flex;
}

input {
  flex-basis : 50%;
}

＆＃13;

<div class="inputs">
  <input type="text" name="firstname" placeholder="First Name" class="first">
  <input type="text" name="lastname" placeholder="Last Name" class="first">
</div>

＆＃13;

如何使两个输入标签内联，每个消耗50％的空间？

1 个答案: