想要在CSS中的同一行中对齐两个单词

Question

我有两个词在一些 JavaScript 编码后会改变。它们将是数组。我可以很好地执行 JavaScript 编码，但我希望它们对齐，而不是一个在另一个之上：

<div class="testArrayDiv">   

    <input type="text" id="testArrayText" value="aqui" class="testArrayText">

    <p id="pTextIng" class="pTextIng">Inglés</p> 

    <p id="pTextPor" class="pTextPor">Português</p>    

    <button id="btnArray" class="btnArray">Test Array</button>

</div>    

我的CSS编码：

.pTextIng {

    margin-left: 45%;

}

.pTextPor {

    margin-left: 45%;

}

单词“Inglés”和“Português”将在一些Javascript命令之后成为列，但它们没有对齐，我希望它们对齐。

Answer 1

<p>在文本后自动插入换行符。如果您不希望这样，您应该使用<span>. 我假设您希望这两个单词与输入字段位于同一行，因此您应该将这两个<span>元素放在 a 中<div>并应用于margin-left该元素。HTML：<div class="indentation">&nbsp; &nbsp; <span id="pTextIng" class="pTextIng">Inglés</span>&nbsp;&nbsp; &nbsp; <span id="pTextPor" class="pTextPor">Português</span></div>CSS：.indentation {&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; margin-left: 45%;}

Answer 2

.pTextIng {&nbsp; &nbsp; border:1px solid black;&nbsp; &nbsp;width:80px;&nbsp;display:inline-block;}.pTextPor {border:1px solid red;&nbsp; &nbsp; &nbsp;width:80px;&nbsp; &nbsp;&nbsp;&nbsp; display:inline-block;}<div class="testArrayDiv">&nbsp; &nbsp;&nbsp; &nbsp; <input type="text" id="testArrayText" value="aqui" class="testArrayText">&nbsp; &nbsp; <p id="pTextIng" class="pTextIng">Inglés</p>&nbsp;&nbsp; &nbsp; <p id="pTextPor" class="pTextPor">Português</p>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <button id="btnArray" class="btnArray">Test Array</button></div>&nbsp;

Answer 3

如果你制作一个里面div有两个的p像：<div class="testArrayDiv">&nbsp; &nbsp;&nbsp; &nbsp; <input type="text" id="testArrayText" value="aqui" class="testArrayText">&nbsp; &nbsp; <div class="idiomas">&nbsp; &nbsp; &nbsp; &nbsp; <p id="pTextIng" class="pTextIng">Inglés</p>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <p id="pTextPor" class="pTextPor">Português</p>&nbsp;&nbsp;&nbsp; &nbsp; </div>&nbsp;&nbsp;&nbsp; &nbsp; <button id="btnArray" class="btnArray">Test Array</button></div>&nbsp;然后你制作这个div元素flex并flex-direction: row.idiomas{&nbsp; &nbsp; display: flex;&nbsp; &nbsp; flex-direction: row;}

Answer 4

您需要添加垂直对齐：顶部；解决问题.testAlign p {&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; vertical-align: top;&nbsp; &nbsp; /* other styles */}并且<p>标签需要位于<div><div class = "testAlign">&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <p id="pTextIng" class="pTextIng">Inglés</p>&nbsp;&nbsp; &nbsp; <p id="pTextPor" class="pTextPor">Português</p></div>