文章/答案/技术大牛

发布

社区首页 >问答首页 >内联块CSS

问内联块CSS
EN

Stack Overflow用户

提问于 2017-05-05 18:58:26

回答 5查看 96关注 0票数 2

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

问题是..。

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

Home.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>

Home.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/中的代码

html

css

Stack Overflow用户

回答已采纳

发布于 2017-05-05 19:09:02

这是因为您已经创建了privacy-select div内联块-这意味着它的宽度与其中最宽的元素一样宽-在本例中，这是display-ib跨度，因为您已经将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>

票数 3

查看全部 5 条回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/43803221

复制

相似问题

问内联块CSS
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问内联块CSSEN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问内联块CSS
EN