换行php和html无法正常工作

Question

我已经尝试过所有内容，但每当我使用"\n" or <br> or <br />时似乎都无法工作。 我试过了<pre></pre>，但它破坏了设计。

我应该在哪里放置什么东西？

它看起来像左，但我需要它像对方一样，在彼此之下组织

<li><a href="portfolio.php">portfolio</a>
        <ul>
        <?php   
        $query_nav = mysql_query("SELECT * FROM `nav` ");
        while ($query_row_nav = mysql_fetch_assoc($query_nav))
        {
        ?>
        <li>
        <?php
        $meer = $query_row_nav['title'];
        //$desc_inject = '';
        //$sub_string = substr($desc_inject, 0, 200);                             
        echo /*$sub_string." " . '' . */'<a href="applink.php?id='.$query_row_nav["id"].'">' . $meer .'</a>';
        ?>
        </li>
        <?php
        }
        ?>
        </ul>
    </li>

CSS

    /* Main Nav */ 

#navigation{
    background: #231f20; 
    font-size: 1.143em; 
    height: 50px; 
    line-height: 30px; 
    margin-top: 57px;
    margin-right: 2px;
    text-align: center; 
    width: 1010px;  
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
}

#navigation ul, #navigation li { 
    list-style:none; 
    padding:0; 
    margin:0; 
    display:inline; 
    }

#navigation ul li{ 
    float:left;
    position:relative; 
    }

#navigation ul li a{
    display: inline-block;
    padding:10px 30px; 
    margin:1px; 
    font-size:18px; 
    white-space:nowrap; 
    border-radius:3px; 
    text-decoration: none; 
    height: 30px; 
    text-decoration: none; 
}
#navigation ul ul{ 
    position:absolute; 
    top:-99999px; 
    left:0;
    opacity: 0;
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    z-index:497; 
    background:#333; 
    padding: 2px; 
    border:1px solid #231f20; 
    border-top:none; 
    box-shadow:#111 0 3px 4px; 
    border-bottom-left-radius:6px; 
    border-bottom-right-radius:6px; 
}
#navigation ul ul ul { 
    position:absolute; 
    top:-99999px; 
    left:100%; 
    opacity: 0; 
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    border-radius:6px;
    border:1px solid #231f20;
}
#navigation ul li:hover>ul{ 
    opacity: 1; 
    position:absolute; 
    top:99%; left:0; 
    }
#navigation ul ul li:hover>ul{ 
    position:absolute; 
    top:0; 
    left:100%; 
    opacity: 1; 
    z-index:497; 
    background:#231f20; 
    }

#navigation li:first-child a { 
    border-top-left-radius: 3px; 
    -moz-border-radius-topleft: 3px; 
    -webkit-border-top-left-radius: 3px;  
    border-bottom-left-radius: 3px; 
    -moz-border-radius-bottomleft: 3px; 
    -webkit-border-bottom-left-radius: 3px; 
    }

Answer 1

你可以改变一些选择器：

#navigation ul, #navigation li 

到

#navigation ul, #navigation > ul > li 

和

#navigation ul li

到

#navigation > ul > li

Answer 2

删除float：left;

#navigation ul li{ 
    position:relative; 
}

Answer 3

你的问题是

#navigation ul li{ 
    float:left;
    position:relative; 
}

删除float:left;

Answer 4

尝试删除display:inline并改用display:block;。请参见示例http://www.w3schools.com/cssref/playit.asp?filename=playcss_display&preval=inline

#navigation ul, #navigation li { 

list-style:none; 
padding:0; 
margin:0; 
display:block;
}

并删除display: inline-block;并将其更改为display：block;

#navigation ul li a{
    display: block;
    padding:10px 30px; 
    margin:1px; 
    font-size:18px; 
    white-space:nowrap; 
    border-radius:3px; 
    text-decoration: none; 
    height: 30px; 
    text-decoration: none; 
}