我有兩個詞在一些 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命令之后成為列，但它們沒有對齊，我希望它們對齊。
4 回答
ABOUTYOU
TA貢獻1812條經驗 獲得超5個贊
<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%;
}
慕萊塢森
TA貢獻1810條經驗 獲得超4個贊
.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>
繁花不似錦
TA貢獻1851條經驗 獲得超4個贊
如果你制作一個里面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;
}
紅糖糍粑
TA貢獻1815條經驗 獲得超6個贊
您需要添加垂直對齊：頂部；解決問題
.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>
- 4 回答
- 0 關注
- 195 瀏覽
添加回答
舉報
0/150
提交
取消