Question

我想将一个元素与另一个元素对齐，例如我想达到这个目标：

. Beer    25cl  5€
          50cl  7€
. wine    25cl  2€
          50cl  3€

使用与以下内容类似的html代码：

<li>
    <span class="item">Beer</span>
    <span class="size">25cl</span>
    <span class="badge">5€</span>
    <div style="clear:both"></div>
    <span class="size">50cl</span>          <!-- how to tell this to start at the same x position than the previous element of class "size" -->
    <span class="badge">7€</span>
</li>

我已经看到了使用表格的解决方案，但我希望有更好的解决方案（使用表格就好像使用火箭筒来杀死苍蝇）。

我已经看到另一个使用JS来检索＆＃34; left＆＃34;元素的属性，但它似乎只有在手动设置左元素时才有效，这不是这里的情况。

如果相关：我正在使用Bootstrap。

Answer 1

如何使用Bootstraps网格布局 - 这也将是响应式的。

我已在此处为您转换了代码：http://www.bootply.com/L5EzpIO6X8

您可以通过将col-lg-12更改为不同的尺寸来调整宽度。您可以阅读有关网格布局here的更多信息。

<ul> 
<li>
  <div class="clearfix">
    <div class="col-lg-6">
      <div class="row">
        <div class="col-lg-6">
          <span class="item">Beer</span>
      </div>
      <div class="col-lg-6">
        <div class="row">
          <div class="col-lg-6">
            <span class="size">25cl</span>
          </div>
          <div class="col-lg-6">
            <span class="badge">5€</span>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-6">
            <span class="size">50cl</span>
          </div>
          <div class="col-lg-6">
            <span class="badge">7€</span>
          </div>
        </div>
      </div>
      </div>
      <div class="row">
        <div class="col-lg-6">
        <span class="item">Wine</span>
      </div>
      <div class="col-lg-6">
        <div class="row">
          <div class="col-lg-6">
            <span class="size">25cl</span>
          </div>
          <div class="col-lg-6">
            <span class="badge">2€</span>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-6">
            <span class="size">50cl</span>
          </div>
          <div class="col-lg-6">
            <span class="badge">3€</span>
          </div>
        </div>
      </div>
      </div>
    </div>
  </div>
  </li>
</ul>

修改

要回答关于子弹的问题 - 删除＆＃34; bullet＆＃34;从我的示例中的列表中，您必须向包含<ul>。

的类添加一个类

Bootstrap 2 这将是：<ul class="unstyled">

Bootstrap 3 这将是：<ul class="list-unstyled">

我已经更新了我的示例（使用Bootstrap 3）。

编辑2

您可以使用<li>类将clearfix的内容包装在div中以获取右侧的项目符号。

然后，您可以通过调整新<div>的边距来调整垂直对齐方式。例如：<div class="clearfix" style="margin-top -15px;">

获得元素的位置

1 个答案:

修改

编辑2