All geek questions in one place

A new line (in code) after the <li> element splitting

Oddly enough, I had never encountered this problem before, but I just started to create a site, and navigation in the upper layers does not work well.

I need a small amount of empty space between each menu item, but when I have new lines between my elements <li>and my elements <a>in my IDE (Netbeans), the empty space disappears, but it still looks fine if I have <li><a></a></li>everything on the same line . I always had the impression that html ignored whitespace in the code.

I checked for any weird characters causing problems in other text editors and can't find anything.

Here is the code ...

Thus, the menu looks right, but the code looks ugly (I know that it looks great when everything is so simple, but I'm going to add more complexity, because of which everything will look awful in one line):

            <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>

Produces: correct

So the menu looks wrong, but the code looks good:

            <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>

Produces: wrong http://img708.imageshack.us/img708/6628/screenshot20100618at000.png

I'm sure I'm doing something simple wrong ... but can someone shed some light on this for me?

Sorry for the long post (my first on stackoverflow).

Edit - full CSS and 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
source share
3 answers

, 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;
}

.

+3

, li 1 0

#menu li, #menu a {
  line-height: 1em;
}
0

-, , , , , .

.

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

: http://safalra.com/web-design/html-and-css/white-space-property/

If this does not work, the next option is to set tags <a>to block level elements and tags <li>for the built-in ones.

#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
source

Source: https://habr.com/ru/post/1750595/

More articles:


All Articles