html - 两个不同的文本在一个范围内对齐

Question

在 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;   
 } 

Answer 1

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