在<div>内部对齐两个输入元素

Question

这是一个相当琐碎的问题，但我无法弄清楚。我试图使用属性inline-block以及浮动元素，但两个输入不会并排。这是jsfiddle.

input {
    width: 100%;
    height: 40px;
    font-size: 2em;
}

input[type=text]:focus {
outline: none;
}

.bookmarkInputs {
    width: 250px;
    margin: 0 auto;
    padding-top: 100px;     
}

.test {
    display: inline-block;
}

<div id='container'>
    <div class='bookmarkInputs'>
        <input id='addNameInput' class='test' type='text'>
        <input id='addURLinput' class='test' type='text'>
    </div>
</div>

Answer 1

您需要将input标签的宽度设置为50％或更小

Answer 2

您的input的宽度为100％，因此您的input都将尝试适合.bookmarkInputs。只是减小其宽度即可。

input {
    /*width: 100%;*/
    width: 48%;
    height: 40px;
    font-size: 2em;
}

input[type=text]:focus {
    outline: none;
}

.bookmarkInputs {
    width: 250px
    margin: 0 auto;
    padding-top: 100px;     
}

.test {
    display: inline-block;
}

<div id='container'>
    <div class='bookmarkInputs'>
        <input id='addNameInput' class='test' type='text'>
        <input id='addURLinput' class='test' type='text'>
    </div>
</div>

Answer 3

您的输入内容为100％，您必须对其进行修改并将其放置为

input {
 /*width: 100%;*/
  width: 48%;
  height: 40px;
  font-size: 2em;

}