Question

我有一个项目列表，其中项目是一些文本和一个按钮。我想把文字放在按钮旁边。我使用inline-block但它不起作用。

请注意，我也要包装文字。

  <ul>
    <li>
      <div class="inline-block">
        Side by side
      </div>
      <div class="inline-block">
        Side by side
      </div>
    </li>
    <li>Profile</li>
    <li>Logout</li>
  </ul>

样式：

.inline-block {
  display: inline-block;
}


ul {
  position: absolute;
  padding: 4px 0;
  top: 28px;
  right: 0;
  width: 80px;

  background-color: white;
  border: 1px solid hsl(0, 0%, 80%);
  border-radius: 4px;
  box-shadow: 0 3px rgba(0, 0, 0, 0.05);
  list-style-type: none;
}

Codepen：http://codepen.io/TimGThomas/pen/oXzpXL

修改

我达到了预期的效果。有很多包装文本和一个按钮。我希望按钮在中间垂直对齐，我尝试vertical-align:middle但它不起作用。

  <ul style="width: 300%">
    <li>
      <div>
        <div class="inline-block text-mid">
         A lot of wrapped text
         A lot of wrapped text
         A lot of wrapped text
        </div>
        <div class="inline-block" style="vertical-align:middle;">
          In the middle
        </div>
      </div>
    </li>
  </ul>

式：

.text-mid {
  width: 100px;
}

新的Codepen：http://codepen.io/anon/pen/wajWBV

Answer 1

提供更大的UL宽度：

ul {
  width: 280px;
}

CodePen：http://codepen.io/anon/pen/wajWBV

Answer 2

我认为您最好使用<span>而不是<div>，<span> display属性默认设置为内联

如何在列表中并排显示div（内联块不起作用），同时垂直对齐右div（vertical-align不起作用）

修改

2 个答案: