Question

如何让列表中的按钮垂直对齐？我认为display:table-cell会起作用但必须遗漏一些东西。

＆＃13;

li {
  display: table;
  }

span {
  display: table-cell;
  }

.left {
  text-align: left;
  }

.right {
  text-align: right;
  }

＆＃13;

<ul>
  <li>
    <span class="left">color: blue</span> 
    <span class="right"><button type="button">Click</button><span>
  </li>
  <li>
    <span class="left">Property Type: Value</span>
    <span class="right"><button type="button">Click</button><span>
  </li>
  <li>
    <span class="left">true: false</span>
    <span class="right"><button type="button">Click</button><span>
  </li>
</ul>

＆＃13;

Answer 1

演示 http://jsfiddle.net/geqc4b3c/

出于特定目的，您遗漏了table-row。

这将完成工作，并且具有动态宽度，因此您不需要具有固定宽度：

ul {
    display: table;
}
li {
    display: table-row;
}
span {
    display: table-cell;
}
.left {
    text-align: left;
}
.right {
    text-align: right;
}

这遵循表格的逻辑结构：table->rows->cells

Answer 2

将width添加到.left。

li {
  display: table;
}
span {
  display: table-cell;
}
.left {
  text-align: left;
  width: 120px;
}
.right {
  text-align: right;
}

<ul>
  <li>
    <span class="left">color: blue</span> 
    <span class="right"><button type="button">Click</button><span>
  </li>
  <li>
    <span class="left">Property Type: Value</span>
    <span class="right"><button type="button">Click</button><span>
  </li>
  <li>
    <span class="left">true: false</span>
    <span class="right"><button type="button">Click</button><span>
  </li>
</ul>

Answer 3

您可能会读入css属性float。在您的情况下，float: right可能是合适的。祝你好运！

Answer 4

您必须添加width，顺便说一下：关闭<span>标记（包含button元素的标记）：

http://jsfiddle.net/2kyo9jq8/

PS：在这种情况下，运行代码段并不好。这是一个更好的小提琴，所以人们可以玩它来找到错误。

垂直对齐项目列表中的按钮

4 个答案: