我有兩個(gè)詞在一些 JavaScript 編碼后會(huì)改變。它們將是數(shù)組。我可以很好地執(zhí)行 JavaScript 編碼，但我希望它們對(duì)齊，而不是一個(gè)在另一個(gè)之上：<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命令之后成為列，但它們沒(méi)有對(duì)齊，我希望它們對(duì)齊。
4 回答
ABOUTYOU
TA貢獻(xiàn)1812條經(jīng)驗(yàn) 獲得超5個(gè)贊
<p>在文本后自動(dòng)插入換行符。如果您不希望這樣，您應(yīng)該使用<span>. 我假設(shè)您希望這兩個(gè)單詞與輸入字段位于同一行，因此您應(yīng)該將這兩個(gè)<span>元素放在 a 中<div>并應(yīng)用于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貢獻(xiàn)1810條經(jīng)驗(yàn) 獲得超4個(gè)贊
.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貢獻(xiàn)1851條經(jīng)驗(yàn) 獲得超4個(gè)贊
如果你制作一個(gè)里面div有兩個(gè)的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>
然后你制作這個(gè)div元素flex并flex-direction: row
.idiomas{
display: flex;
flex-direction: row;
}
紅糖糍粑
TA貢獻(xiàn)1815條經(jīng)驗(yàn) 獲得超6個(gè)贊
您需要添加垂直對(duì)齊：頂部；解決問(wèn)題
.testAlign p {
display: inline-block;
vertical-align: top;
/* other styles */
}
并且<p>標(biāo)簽需要位于<div>
<div class = "testAlign">
<p id="pTextIng" class="pTextIng">Inglés</p>
<p id="pTextPor" class="pTextPor">Português</p>
</div>
- 4 回答
- 0 關(guān)注
- 194 瀏覽
添加回答
舉報(bào)
0/150
提交
取消