На моем веб-сайте у меня есть два SPANS: «услуги» и «продукты» в правом верхнем углу (в серой полосе). По какой-то причине они располагаются вертикально, тогда как я ожидал, что они будут выровнены по горизонтали, поскольку SPANS - это всего лишь разметка, размечающая текст внутри текстового блока.
Фрагмент:
<div id="access">
<div>
<a href="#">
<span>services </span>
</a>
<a href="#">
<span>products</span>
</a>
</div>
</div>
Этот CSS - проблема, я думаю
#access {
/* background: #74C20E;
background: #716417;*/
display: block;
float: left;
margin: 5px auto;
background-color:rgb(181, 197, 207);
-moz-border-radius: 0px;
border-radius: 0px;
width: 1200px;
<!-- width: 940px;
-->
}
#access .menu-header,
div.menu {
font-size: 13px;
margin-left: 12px;
width: 928px;
}
#access .menu-header ul,
div.menu ul {
list-style: none;
margin: 0;
}
#access .menu-header li,
div.menu li {
float: left;
position: relative;
}
#access a {
color: white;
display: block;
line-height: 38px;
padding: 0 10px;
text-decoration: none;
}
#access ul ul {
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
display: none;
position: absolute;
top: 38px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
}
#access ul ul li {
min-width: 180px;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
background: #0f9195;
line-height: 1em;
padding: 10px;
width: 160px;
height: auto;
}
#access li:hover > a,
#access ul ul :hover > a {
background: #635ba9;
color: #fff;
}
#access ul li:hover > ul {
display: block;
}
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
color: #fff;
}
Скрипка здесь
Кто-нибудь знает, почему они отображаются не горизонтально, а вертикально?
2 ответа
Элементы span
по умолчанию являются встроенными, если они не были переопределены, и они все еще встроены на вашей странице. Проблема в их родителях, элементах a
. Соответствующая структура страницы выглядит так:
<div id="access">
<div>
<a href="#">
<span>services </span>
</a>
<a href="#">
<span>products</span>
</a>
</div>
</div>
В вашем css вы установили
#access a{
display: block;
}
Это приводит к тому, что якоря становятся элементами уровня блока и накладываются друг на друга независимо от поведения промежутков. Просто удалите display: block
из #access a
, и все заработает должным образом.
Я предлагаю вам ознакомиться с Chrome (или любым другим) отладчиком https: //developers.google.com/chrome-developer-tools/docs/elements, который позволит вам проверить свою страницу и довольно легко сузить эти проблемы, просто проверив элемент и взглянув на применяемые стили.
Изменить отображение: блок для отображения: встроенный блок
#access a {
color: white;
display:inline-block;
line-height: 38px;
padding: 0 10px;
text-decoration: none;
}
Похожие вопросы
Новые вопросы
html
HTML (язык гипертекстовой разметки) — это язык разметки для создания веб-страниц и другой информации, отображаемой в веб-браузере. Вопросы относительно HTML должны включать минимальный воспроизводимый пример и некоторое представление о том, чего вы пытаетесь достичь. Этот тег редко используется отдельно и часто в паре с [CSS] и [JavaScript].
display:block
. (blue-walrus.com/wp-content/themes/whispy/style .css строка 463)