在 Bootstrap 内 <span>
元素,我试图将单词“amount”对齐到左侧,将“$”对齐到右侧,但将它们放在同一个标签上。我试着要一个 <span>
在另一个里面 <span>
并向它们应用不同的 CSS,如下面的代码,但这没有用。我该如何处理?有人可以帮忙吗?非常感谢!
HTML:
span class="input-group-addon" id="sizing-addon2">amount <span id="dollarsign">$</span></span>
CSS:
.input-group-addon {
min-width:300px;
text-align:centre;
font-family: myriad-pro, sans-serif;
}
#dollarsign{
text-align:right;
}
最佳答案
.input-group-addon
设置为 width: 1%;
在 Bootstrap v3 中。)有很好的理由。不要惹它。正确的做法是:
- 设置那个东西的最小宽度
min-width: 10rem
(%
,em
,rem
,px
...) - 使用
<span>
插入并 float 它。
<div class="input-group">
<span class="input-group-addon" style="min-width: 12rem; text-align:right;"><span style="float: left;">I am floating-left</span>$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
这里的关键是min-width
.参见示例。此外,如果需要,禁用 min-width
在非常窄的设备上,并将其中的一些文本包装在一个隐藏在移动设备上的类中(有一个简短的版本)。
.input-group-addon:first-child {
min-width: 200px;
text-align: right;
}
.input-group-addon .floater {
float: left;
}
.input-group {
margin-bottom: 15px;
}
body {
margin: 0;
display: flex;
flex-direction: column;
align-items:cener;
justify-content: center;
min-height: 100vh;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
<span class="input-group-addon"><span class="floater">I am floating-left</span>$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
<div class="input-group">
<span class="input-group-addon"><span class="floater">Floating-left</span>$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
<div class="input-group">
<span class="input-group-addon"><span class="floater">$</span>Not floating left</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
注意:不要使用超过 1 个 <input>
在.input-group
!
另外:如果您只在一个元素上使用它,您可能想在内部跨度上设置一个右边距,这样就完成了。请记住,如果你给它留下空间,它总是会缩小,因为它有一组 width:1%
。 .
关于html - 两个不同的文本在一个范围内对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42286145/