ban*_*ing 39 html css alignment
我有一个看似容易解决的问题,但我正在努力.如何在不使用BR元素的情况下将这两个输入对齐到表单的右侧？
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
form {
text-align: right;
}
input {
width: 100px;
}
</style>
</head>
<body>
<form>
<input name="declared_first" value="above" />
<br/> <!-- I want to get rid of this -->
<input name="declared_second" value="below" />
</form>
</body>
</html>
我只想让第一个输入出现在第二个输入上方,两个都在右侧.
Ori*_*iol 63
您可以使用向右浮动并清除它们.
form {
overflow: hidden;
}
input {
float: right;
clear: both;
}<form>
<input name="declared_first" value="above" />
<input name="declared_second" value="below" />
</form>您还direction可以从父级设置从右到左,并在输入上从左到右恢复默认值.有了display: block你可以迫使他们在不同的线路.
form {
direction: rtl;
}
input {
display: block;
direction: ltr;
}<form>
<input name="declared_first" value="above" />
<input name="declared_second" value="below" />
</form>或现代方式,flexbox布局
form {
display: flex;
flex-direction: column;
align-items: flex-end;
}<form>
<input name="declared_first" value="above" />
<input name="declared_second" value="below" />
</form>小智 14
试试这个:
<html>
<body>
<input type="text" style="direction: rtl;" value="1">
<input type="text" style="direction: rtl;" value="10">
<input type="text" style="direction: rtl;" value="100">
</body>
</html>
尝试这个：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
text-align: right;
}
input {
width: 100px;
}
</style>
</head>
<body>
<form>
<p>
<input name="declared_first" value="above" />
</p>
<p>
<input name="declared_second" value="below" />
</p>
</form>
</body>
</html>
小智 5
要仅影响文本类型输入框，请使用属性选择器
输入[类型=“文本”]
这样，它就不会影响其他输入，而只会影响文本输入。
https://www.w3schools.com/css/css_attribute_selectors.asp
例如，使用一个 div 并给它一个参考的想法：
#divEntry input[type="text"] {
text-align: right;}
| 归档时间： |
|
| 查看次数： |
173828 次 |
| 最近记录： |