html - 内联 block CSS

Question

我在我的 CSS 代码中遇到了问题......

问题是......

为什么“图标 friend ”和“图标隐私”不想与文本对齐

首页.html

 <link rel="stylesheet" href="//cdn.materialdesignicons.com/1.9.32/css/materialdesignicons.min.css">

 <div class="privacy-select">
  <span class="display-ib">
   <span class="mdi mdi-earth"></span>
   <p>World</p>
  </span>

  <ul class="my-dropdown">
    <li>
      <span class="mdi mdi-account"></span>
      <p>Friend</p>
    </li>
    <li>
      <span class="mdi mdi-lock"></span>
      <p>Privacy</p>
    </li>
  </ul>

 </div>

首页.css

.privacy-select {
  position: relative;
  display: inline-block
}

span {
  display: inline-block;
}

p {
  margin: 0;
  display: inline-block;
}

ul {
  dispaly: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.my-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 1em;
}

查看我的编码 https://jsfiddle.net/FIERMANDT/7gygxncp/

Answer 1

这是因为您已将 privacy-select div 内联 block 设置为 - 这意味着它的宽度与内部最宽的元素一样宽 - 在本例中为 display-ib span 因为您已将 ul 设置为绝对位置(将其移出流程)

这意味着，由于这对于 ul 元素来说不够宽，因此 ul 元素将换行，除非您告诉它们不要这样做:

.privacy-select {
  position: relative;
  display: inline-block;
}

span {
  vertical-align: middle;
}

p {
  margin: 0;
  display: inline-block;
}

ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

.my-dropdown {
  position:absolute; /* does this need to be absolutely positioned - removing this is another way fix your issue */
  top:100%;
  right: 0;
  margin-top: 1em;
  white-space:nowrap; /* add this, or alternately give this a min-width, or you could make privacy-select a block element  */
}

<link rel="stylesheet" href="//cdn.materialdesignicons.com/1.9.32/css/materialdesignicons.min.css">
<div class="privacy-select">
  <span class="display-ib">
   <span class="mdi mdi-earth"></span>
  <p>World</p>
  </span>

  <ul class="my-dropdown">
    <li>
      <span class="mdi mdi-account"></span>
      <p>Friend</p>
    </li>
    <li>
      <span class="mdi mdi-lock"></span>
      <p>Privacy</p>
    </li>
  </ul>
</div>