Попытка переместить некоторые строки в строке Nav Bar внутри div, и они не отвечают. Может ли кто-нибудь предложить любую помощь по этому поводу? margin-top, кажется, ничего не делает. Новое в CSS.
CSS
#nav {
height: 70px;
vw: 100%;
background-color: hsla(0, 0%, 83%, .7);
margin-left: -10px;
margin-top: -16px;
margin-right: -10px;
border-bottom: 1px black solid;
}
li {
list-style-type: none;
display: inline;
font-family: Helvetica, sans-serif;
font-size: 20px;
padding-right: 20px;
color: hsl(0, 0%, 50%);
margin-top: 10px;
}
li:hover {
color: white;
}
HTML
<header>
<div id="nav">
<ul>
<li>About</li>
</ul>
</div>
<h1>Hi. This is my playground.</h1>
</header>
<div id="me">
<img src="dp.jpg">
</div>
Свойство margin
не влияет на inline
элементы, поэтому оно не работает.
Свойства поля определяют ширину области поля поля. Условное свойство "margin" устанавливает маржу для всех четырех сторон, в то время как другие свойства поля только устанавливают соответствующую сторону. Эти свойства применимы ко всем элементам, но вертикальные поля не будут влиять на незаменяемые встроенные элементы. http://www.w3.org/TR/CSS21/box.html#margin-properties
Также см. Этот ответ о том, почему измерения не могут быть установлены на inline
элементах.
Чтобы решить эту проблему, вы можете либо изменить li
для display:inline-block
. (пример) - он работает.
Альтернативно, вы также можете плавать элементы li
, имеющие одинаковый желаемый эффект. (пример)
В #nav у вас есть опечатка:
vw: 100%;
}
в#nav
.