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

在Bootstrap v3中将

.input-group-addon设置为width: 1%;。）这是有充分理由的。不要惹它。正确的方法是：

在该内容min-width: 10rem上设置最小宽度（%，em，rem，px ...）
使用<span> insde并浮动它。

<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，并将其中的一些文本包含在隐藏在移动设备上的类中（包含简短版本）。

＆＃13;

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

＆＃13;

<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>

＆＃13;

注意：<input>中不要使用1 .input-group以上！ 另外：如果您只在一个项目上使用它，您可能需要在内部范围上设置右边距并且您已完成。请记住，如果你留下空间，它总是会缩小，因为它有一个集合width:1%。

Answer 2

您可以使用float和text-align：

HTML

<span class="input-group-addon" id="sizing-addon2"><span>amount </span>$</span>

CSS

#sizing-addon {text-align:right}
#sizing-addon2 span {float:left;}

你也可以使用（inline-）flex和justify-content：space-between

Answer 3

您可以将美元符号右移。

＆＃13;

.input-group-addon {
  min-width: 300px;
  font-family: myriad-pro, sans-serif;
  text-align: left!important;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<span class="input-group-addon" id="sizing-addon2">amount <span class="pull-right">$</span></span>

＆＃13;

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

3 个答案: