删除两个元素之间的空间

Question

我对箭头图标的位置有些问题，因为图标说明和箭头图标之间的空间太大。

nav {
  background-color: #f2f2f2;
  padding: .3em 0;
  border-radius: 7px;
  font-family: "Source Sans Pro";
}
section {
  background-color: #fafafa;
  border-radius: 5px;
  display: inline-block;
  margin-left: .5em;
}
section > h1 {
  margin: .5em .5em 0 .5em;
  display: block;
  font-weight: bold;
  font-size: .7em;
  color: #555;
  padding: 0 .5em;
  background-color: #F2F2F2;
  border-radius: 4px;
}
section > ul {
  list-style: none;
  padding: .25em .25em 0 .25em;
  color: #555;
  margin: 0 0 0 .5em;
  display: inline-block;
}
section > ul > li {
  font-size: .5em;
  margin: .5em 0 0 0;
  display: inline-block;
  width: 4em;
  text-align: center;
  float: left;
  position: relative;
  cursor: pointer;
}
section ul li div i {
  font-size: 3em !important;
}
section > ul > li > div {
  background-color: #fafafa;
  border: 1px solid #fafafa;
}
section > ul > li > div:hover {
  border-color: #98a6ba;
  background-color: #dde4ef;
  outline: none;
}
section > ul > li > ul {
  list-style: none;
  font-size: 2em;
  background-color: #f2f2f2;
  position: absolute;
  top: 4em;
  left: 0px;
  margin: 0;
  padding: .5em 1em;
}
section > ul > li > ul > li {
  white-space: nowrap;
}
.fa-sort-desc {
  font-size: 2em !important;
  color: #B4B4B4;
}
.fa-sort-desc:hover {
  color: #555;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav>
  <section>
    <h1>Title</h1>
    <ul>
      <li>
        <div><i class="fa fa-file-o"></i>
          <br>New</div>
      </li>
      <li>
        <div><i class="fa fa-floppy-o"></i>
          <br>Save</div>
        <br><i class="fa fa-sort-desc"></i>
        <ul>
          <li>Subelement 1</li>
          <li>Subelement 2</li>
          <li>Subelement 3</li>
        </ul>
      </li>
    </ul>
  </section>
</nav>

Answer 1

在 <br>之后删除<br>Save</div> 。如果它仍然太多，您也可以降低箭头上的line-height。

编辑：还在箭头中添加了position:relative;和top:-2px;。

＆＃13;

＆＃13;

nav {
  background-color: #f2f2f2;
  padding: .3em 0;
  border-radius: 7px;
  font-family: "Source Sans Pro";
}
section {
  background-color: #fafafa;
  border-radius: 5px;
  display: inline-block;
  margin-left: .5em;
}
section > h1 {
  margin: .5em .5em 0 .5em;
  display: block;
  font-weight: bold;
  font-size: .7em;
  color: #555;
  padding: 0 .5em;
  background-color: #F2F2F2;
  border-radius: 4px;
}
section > ul {
  list-style: none;
  padding: .25em .25em 0 .25em;
  color: #555;
  margin: 0 0 0 .5em;
  display: inline-block;
}
section > ul > li {
  font-size: .5em;
  margin: .5em 0 0 0;
  display: inline-block;
  width: 4em;
  text-align: center;
  float: left;
  position: relative;
  cursor: pointer;
}
section ul li div i {
  font-size: 3em !important;
}
section > ul > li > div {
  background-color: #fafafa;
}
section > ul > li > div:hover {
  border-color: #98a6ba;
  background-color: #dde4ef;
  outline: none;
}
section > ul > li > ul {
  list-style: none;
  font-size: 2em;
  background-color: #f2f2f2;
  position: absolute;
  top: 4em;
  left: 0px;
  margin: 0;
  padding: .5em 1em;
}
section > ul > li > ul > li {
  white-space: nowrap;
}
.fa-sort-desc {
  font-size: 2em !important;
  color: #B4B4B4;
}
.fa-sort-desc:hover {
  color: #555;
}
.fa-sort-desc{
  line-height: 0 !important;
  position: relative;
  top: -2px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav>
  <section>
    <h1>Title</h1>
    <ul>
      <li>
        <div><i class="fa fa-file-o"></i>
          <br>New</div>
      </li>
      <li>
        <div><i class="fa fa-floppy-o"></i>
          <br>Save</div>
        <i class="fa fa-sort-desc"></i>
        <ul>
          <li>Subelement 1</li>
          <li>Subelement 2</li>
          <li>Subelement 3</li>
        </ul>
      </li>
    </ul>
  </section>
</nav>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在<br>

之后删除<br>Save</div>

Answer 3

在<Br>之后移除<br>Save</div>并将“Line-Height”赋予“fa-sort-desc”