javascript - 对齐按钮中的多个文本

我有三个变量，它们具有不同的值和不同的长度。例如:

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

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

我有一个长按钮，我想在其中显示这些值。现在我正在使用在按钮中将它们隔开。然而，由于值可以改变，它们的长度可以增加或缩小，我需要适应。首先，第一个值可以左对齐，第二个值可以居中对齐，第三个变量可以右对齐。我如何实现这一目标？

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>

最佳答案

您可以将数据包装在 span 元素中，并将 flexbox 属性应用于 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>

关于javascript - 对齐按钮中的多个文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47552335/

javascript - 对齐按钮中的多个文本

上一篇：javascript - 捕获 href 并防止事件默认

下一篇：html - 如何垂直对齐当前使用列中的 bootstrap 4 类 img-fluid 的图像？