html - 为什么我不能让两个 元素并排并居中对齐？

Question

这是我正在尝试做的事情的蓝图:

如您所见，我想将这两个文本移动到输入框的中心。

HTML:

<p id="win">On win:</p>
<p id="lose">On lose:</p>
<input class="default" id="onwin" placeholder="%" value="0" autocomplete="off"/>
<input class="default" id="onlose" placeholder="%" value="0" autocomplete="off"/>

我试过这样做，但没有成功:

<p style="text-align: center;" id="win">On win:</p>
<p style="text-align: center;float: left;" id="lose">On lose:</p>
<input class="default" id="onwin" placeholder="%" value="0" autocomplete="off"/>
<input class="default" id="onlose" placeholder="%" value="0" autocomplete="off"/>

result

用于输入的 CSS:

input[class="default"] {
    width: 30%;
    padding: 12px 20px;
    margin : 0 auto;
    box-sizing: border-box;
    border: 1px solid #555;
    text-align: center;
    background-color: white;
    display: inline-block;
}

我怎样才能正确地做到这一点？

Answer 1

使用 float 和 text-align 你可以实现它:

body {text-align: center;}
#win, #lose {width: 50%; float: left; text-align: center;}
#lose {float: right;}
.default {display: inline-block; width: 45%; padding: 3px;}

<p id="win">On win:</p>
<p id="lose">On lose:</p>
<input class="default" id="onwin" placeholder="%" value="0" autocomplete="off"/>
<input class="default" id="onlose" placeholder="%" value="0" autocomplete="off"/>

预览