想要在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">

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

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

</div>

CSS：

.indentation {

    display: inline-block;

    margin-left: 45%;

}

Answer 2

.pTextIng {

    border:1px solid black;

   width:80px;

 display:inline-block;

}

.pTextPor {

border:1px solid red;

     width:80px;    

  display:inline-block;

}

<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> 

Answer 3

如果你制作一个里面div有两个的p像：

<div class="testArrayDiv">   

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

    <div class="idiomas">

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

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

    </div>  

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

</div> 

然后你制作这个div元素flex并flex-direction: row

.idiomas{

    display: flex;

    flex-direction: row;

}

Answer 4

您需要添加垂直对齐：顶部；解决问题

.testAlign p {

    display: inline-block;

    vertical-align: top;

    /* other styles */

}

并且<p>标签需要位于<div>

<div class = "testAlign">    

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

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

</div>