На моем веб-сайте у меня есть два 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;
}

Скрипка здесь

http://jsfiddle.net/9uK9L/

Кто-нибудь знает, почему они отображаются не горизонтально, а вертикально?

-2
Oliver Watkins 24 Мар 2014 в 20:35
2
Пожалуйста, добавьте сюда содержательный код и описание проблемы. Не делайте ссылку на сайт, который нужно исправить, иначе этот вопрос потеряет всякую ценность для будущих посетителей, как только проблема будет решена. Публикация краткого, автономного, правильного примера (SSCCE), демонстрирующего вашу проблему, поможет вам получить более точные ответы. Для получения дополнительной информации см. Что-то на моем веб-сайте не работает. Могу я просто вставить на него ссылку? Спасибо!
 – 
j08691
24 Мар 2014 в 20:37
1
Вы продвигаете свой сайт?
 – 
Kashish Arora
24 Мар 2014 в 20:37
2
В вопросе необходимо предоставить тестовый пример. Ссылка на внешний сайт — дурной тон, и, поскольку вы, вероятно, исправите это в какой-то момент, это сделает вопрос бессмысленным, поскольку он будет зависеть от кода, которого больше не существует.
 – 
Quentin
24 Мар 2014 в 20:38
И чтобы ответить на ваш вопрос, ваши пролеты находятся в якорях, к которым применено display:block. (blue-walrus.com/wp-content/themes/whispy/style .css строка 463)
 – 
j08691
24 Мар 2014 в 20:38
Хорошо, я отредактирую сообщение, удалю ссылку на свой веб-сайт и вместо этого вставлю из одного из решений.
 – 
Oliver Watkins
24 Мар 2014 в 20:49

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, который позволит вам проверить свою страницу и довольно легко сузить эти проблемы, просто проверив элемент и взглянув на применяемые стили.

8
Kit Sunde 24 Мар 2014 в 20:44

Изменить отображение: блок для отображения: встроенный блок

#access a {
    color: white;
    display:inline-block;
    line-height: 38px;
    padding: 0 10px;
    text-decoration: none;
}
2
riazshah 24 Мар 2014 в 21:11