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”

删除两个元素之间的空间

3 个答案: