对齐按钮中的多个文本答案

【问题标题】：Aligning multiple texts in a button对齐按钮中的多个文本
【发布时间】：2018-05-13 03:15:16
【问题描述】：

我有三个变量，它们的值不同，这些值的长度也不同。例如：

var a = "123456"
var b = "23,000.00"
var c = "Accounts Receivable"

这三个变量的值可以改变。

我有一个长按钮，我想在其中显示这些值。现在我正在使用 &nbsp 将它们隔开在按钮中。但是，由于值可以改变，并且它们的长度可以增长或缩小，我需要适应。首先，第一个值可以左对齐，第二个居中对齐，第三个变量可以右对齐。我如何做到这一点？

a = "123456"
b = "23,000.00"
c = "Accounts Receivable"

jQuery("#column_1").html("");
jQuery("#column_3").html("<span style='color:#FFFFFF'> Variable1&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspVariable2&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspVariable3</span>");

jQuery("#column_1").append('<div class="col-md-auto"> <button type="button" class="list-group-item" >' + a + "&nbsp&nbsp&nbsp&nbsp&nbsp" + b + "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp" + c + '</button></div>');

b = "100,000,000.00"

jQuery("#column_1").append('<div class="col-md-auto"> <button type="button" class="list-group-item" >' + a + "&nbsp&nbsp&nbsp&nbsp&nbsp" + b + "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp" + c + '</button></div>');

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<body class='sapUiBody'>
  <div id="grid" class="container-fluid">
    <div class="row no-gutter">
      <div class="col-md-3">
        <div id="column_1">
          <div class="list-group"></div>
        </div>
      </div>
    </div>
  </div>
</body>

【问题讨论】：

除非您可以将每个文本“项目”分解为单独的元素，否则我看不到这样做的方法。 CSS 可以分散元素，但除非它们是分开的，否则不能，

标签： javascript html css button text

【解决方案1】：

你也可以使用指定宽度的内联块 div

<div style="width: 150px;display: inline-block;">Value 1</div>
<div style="width: 150px;display: inline-block;">Value 2</div>
<div style="width: 150px;display: inline-block;">Value 3</div>

例如，在您的按钮中，有很多方法可以仅使用 css 来完成此操作

也许值得知道 button groups 存在，我真的不知道你想要这个按钮做什么

【讨论】：

【解决方案2】：

您可以将数据包装在 span 元素中，并将弹性框属性应用于 CSS 中的 .list-group-item。

示例：

a = "123456"
b = "23,000.00"
c = "Accounts Receivable"

jQuery("#column_1").html("");
jQuery("#column_3").html("<span style='color:#FFFFFF'> Variable1&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspVariable2&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspVariable3</span>");

jQuery("#column_1").append('<div class="col-md-auto"> <button type="button" class="list-group-item" ><span>' + a + '</span><span>' + b + '</span><span>' + c + '</span></button></div>');

b = "100,000,000.00"

jQuery("#column_1").append('<div class="col-md-auto"> <button type="button" class="list-group-item" ><span>' + a + '</span><span>' + b + '</span><span>' + c + '</span></button></div>');

.list-group-item {
  display: flex !important;
  justify-content: space-between;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<body class='sapUiBody'>
  <div id="grid" class="container-fluid">
    <div class="row no-gutter">
      <div class="col-md-3">
        <div id="column_1">
          <div class="list-group"></div>
        </div>
      </div>
    </div>
  </div>
</body>

【讨论】：