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

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

<p>自动在文本后插入换行符。 如果你不想要这个，你应该使用<span> 。 我假设您希望两个单词与输入字段位于同一行，因此您应该将两个<span>元素放在<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 3

如果你用两个p制作一个div像：

<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

您需要添加vertical-align:top; 解决问题

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