Новая строка (в коде) после разметки элемента <li> - PullRequest
Новая
       8

Новая строка (в коде) после разметки элемента <li>

3 голосов
/ 18 июня 2010

Странно, я никогда раньше не сталкивался с этой проблемой, но я только начал делать сайт, а верхняя навигация играет не очень хорошо.

Я хочу небольшое количество пустого пространства между каждымпункт меню, но когда у меня есть новые строки между моими <li> элементами и моими <a> элементами в моей среде IDE (Netbeans), пробел исчезает, но все равно выглядит хорошо, если у меня <li><a></a></li> все на одной строке.У меня всегда было впечатление, что html игнорирует пробелы в коде.

Я проверил наличие любых странных символов, вызывающих проблемы в других текстовых редакторах, и не могу ничего найти.

Вот код...

Таким образом, меню выглядит корректно, но код выглядит некрасиво (я знаю, что это выглядит прекрасно, когда это так просто, но я собираюсь добавить больше сложности, из-за чего все будет выглядеть ужасно в одной строке): 

            <ul id="menu">
                <li><a href="#">About</a></li>
                <li class="active"><a href="<?php echo site_url("tracklist"); ?>">Track List</a></li>
                <li><a href="<?php echo site_url("stats"); ?>">Stats</a></li>
                <li><a href="#">Stats</a></li>
             </ul>

Производит: правильно http://img689.imageshack.us/img689/6628/screenshot20100618at000.png

Подобное меню выглядит неправильно, но код выглядит нормально: 

            <ul id="menu">
                <li>
                    <a href="#">About</a>
                </li>
                <li class="active">
                    <a href="<?php echo site_url("tracklist"); ?>">Track List</a>
                </li>
                <li>
                    <a href="<?php echo site_url("stats"); ?>">Stats</a>
                </li>
                <li>
                    <a href="#">Stats</a>
                </li>
            </ul>

Производит: неправильно http://img708.imageshack.us/img708/6628/screenshot20100618at000.png

Я уверен, что это что-то простое, я делаю неправильно ... но может кто-то пролить свет на это для меня?

Извините за длинный пост (мой первый на stackoverflow).

Редактировать - Полный CSS и HTML: 

body {
   /* font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; */
   font-family: 'Trebuchet MS', Helvetica, sans-serif;
   /* font-family: 'Copperplate', 'Copperplate Gothic Light', sans-serif; */
}

a {
    color: #FFFFFF;
    text-decoration: none;
}

#container{
    margin: 0 auto;
    width: 800px;
}

#content {
    margin-top: 50px;
}

#header {
    background-image: url("../images/absolute_radio_logo.png");
    border-bottom: solid 1px #777777;
    background-repeat: no-repeat;
    width: 800px;
    height: 86px;
    padding-bottom: 15px;
}

#menu {
    float: right;
}

#menu li {
    display: inline;
    padding: 5px;
    background-color: #932996;
    border-bottom: solid 1px #932996;
}

#menu li:hover {
    border-bottom: solid 3px #FF0000;
}

#menu li.active {
    background-color: #58065e;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
        <title>Radio - Statistics</title>
        <link rel="stylesheet" type="text/css" href="http://localhost/resources/css/style.css" />
    </head>
    <body>
        <div id="container">

            <div id="header">
                <ul id="menu">
                <li>
                    <a href="#">About</a>
                </li>
                <li class="active">
                    <a href="http://localhost/tracklist">Track List</a>
                </li>

                <li>
                    <a href="http://localhost/stats">Stats</a>
                </li>
                <li>
                    <a href="#">Stats</a>
                </li>
    </ul>
        </div>

        <div id="content">
            <!-- content -->
                   Elapsed Time: 0.0033 - Memory Used: 0.4MB
        </div>
    </div>
    </body>
</html>

Ответы [ 3 ]

3 голосов
/ 18 июня 2010

Кажется, что все в порядке с предоставленным вами CSS, так что я думаю, должно быть какое-то другое правило, влияющее на ваши ссылки Не могли бы вы предоставить нам предварительный просмотр в реальном времени или полную таблицу стилей?

Edit:

Кажется, проблема в том, как «display: inline» сворачивает содержимое элементов, хотя я не смог найти никаких доказательств этого. Изменение 

#menu li {
  display: inline;
}

до 

#menu li {
  display: inline-block;
}

или добавить к нему поле: 

#menu li {
  display: inline;
  margin-right: 5px;
}

Чтобы исправить выравнивание текста, я продолжу и рекомендую вам всплыть li s. Кто-нибудь, пожалуйста, поправьте меня, если это ужасная идея. Добавить 

#menu {
  overflow: hidden;
}

#menu li {
  float: left;
}

к существующим правилам.

0 голосов
/ 18 июня 2010

Во-первых, эти два снимка экрана, по-видимому, поменялись местами, на первом есть пробелы между ссылками, вызванные пробелом во втором фрагменте кода.

Это новое свойство пробела-коллапса может бытьможет помочь.

#menu li{white-space-collapse:discard}

через: http://safalra.com/web-design/html-and-css/white-space-property/

Если это не сработает, следующая опция - установить<a> теги для элементов уровня блока и <li> теги для встраивания. 

#menu li{display:inline}
#menu li a{
  display:inline-block
  padding: 5px;
  background-color: #932996;
  border-bottom: solid 1px #932996;
}
#menu li a:hover{
  border-bottom: solid 3px #FF0000;
}
#menu li.active a {
  background-color: #58065e;
}
0 голосов
/ 18 июня 2010

Так же, как предположение, попробуйте установить высоту строки для тегов li & a равной 1em или даже 0 

#menu li, #menu a {
  line-height: 1em;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...