0
У меня возникли проблемы с положением стрелки вниз, так как между описанием значка и значком стрелки слишком много места.Удалите пространство между двумя элементами
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>
К сожалению, это все еще слишком много. Даже если я использую 'line-height: 0;'. Я этого не понимаю. – user3142695
@ user3142695 Обновлено, теперь все должно быть хорошо! –