javascript - 如何在列表中并排显示 div(内联 block 不起作用)同时垂直对齐右侧的 div(垂直对齐不起作用)

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;
}

代码笔: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;
}

新代码笔:http://codepen.io/anon/pen/wajWBV

Answer 1

给予更大的 UL 宽度:

ul {
  width: 280px;
}

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