换行 php 和 html 不起作用答案

【问题标题】：newline php and html not working换行 php 和 html 不起作用
【发布时间】：2012-09-23 19:19:56
【问题描述】：

我已经尝试了所有方法，但每次使用 "\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; 
    }

【问题讨论】：

看起来你可能在浮动一些东西，你能包括相关 UL 的 CSS 吗？
你试过display:block吗？如果它们是浮动的，请移除浮动。此外，您应该向我们提供完整的 HTML 和 CSS 代码

标签： php html css newline

【解决方案1】：

你可以改变一些选择器：

#navigation ul, #navigation li

到

#navigation ul, #navigation > ul > li

和

#navigation ul li

到

#navigation > ul > li

【讨论】：

哦，很好，它工作了，但是现在所有东西都居中了，我怎样才能把它们放在左边？
文本对齐：左而不是居中

【解决方案2】：

去掉浮动：left;

#navigation ul li{ 
    position:relative; 
}

【讨论】：

【解决方案3】：

你的问题是

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

删除float:left;

【讨论】：

我认为这会破坏他的主列表 - 但我想他的下拉列表是从这个继承的，所以需要添加一个新类来覆盖这个浮动
这会破坏nav，除此之外，去掉float:left对ul列表没有任何影响，还是和ul列表一样

【解决方案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;并将其更改为显示：块；

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

【讨论】：

谢谢，simoncereska 已经解决了