<span> 和 <ul> 垂直对齐

Question

我有一个 <span> 元素，后跟一个水平 <ul> 元素。为什么 <ul> 上有左边距和底部距？我怎样才能删除这个 space?

HTML

<span>AAAAA</span>
<ul>
    <li>BBBBB</li>
    <li>CCCC</li>
</ul>

CSS

body {
  background-color: #000;
  margin: 0;
  padding: 0;
}

span {
  background-color: #f00;
}

ul {
  background-color: #0f0;
  display: inline-block;
  list-style: none;
  margin: 0;
  padding: 0;
}

ul > li {
  float: left;
  padding-right: 1em;
}

Answer 1

看看这个！

已将 inline-block 添加到跨度，并且 vertical-align 也已添加。跨度有一个视觉边距 / space 因为它不是 inline-block 和它旁边的 ul 而是 inline-block

这是您所期望的吗？请让我知道您对此的反馈。谢谢！

body {
  background-color: #000;
  margin: 0;
  padding: 0;
}
span {
  background-color: #f00;
  display: inline-block;
  vertical-align: top;
}
ul {
  background-color: #0f0;
  display: inline-block;
  vertical-align: top;
  list-style: none;
  margin: 0;
  padding: 0;
}
ul > li {
  float: left;
  padding-right: 1em;
}

<span>AAAAA</span>
<ul>
  <li>BBBBB</li>
  <li>CCCC</li>
</ul>

Answer 2

正如其他用户所说，display: inline-block; 应该可以解决问题，但您的 fiddle 似乎已经做对了。要找出意外的边距、边框或其他 css 东西的来源，我依赖 firebug（Web 开发人员的 Firefox 插件）。

Answer 3

当你使用 display inline-block 时给出 font-size: 0;到父元素。

试试这个代码...

 body {
  background-color: #000;
  margin: 0;
  padding: 0;
  font-size: 0;
}

span {
  background-color: #f00;
  font-size: 14px;
  display: inline-block;
  vertical-align: top;
}

ul {
  background-color: #0f0;
  display: inline-block;
  list-style: none;
  margin: 0;
  padding: 0;
}

ul > li {
  float: left;
  padding-right: 1em;
  font-size: 14px;
}

<span> 和 <ul> 垂直对齐

<span> and <ul> vertical alignment

html

css

vertical-alignment

css-float