換行符php和html無法正常工作

我試過了所有的東西，只要我使用"\n" or <br> or <br />，它似乎不工作。我試過<pre></pre>，但它破壞了設計。換行符php和html無法正常工作

我應該在哪裏放置什麼東西？

它看起來像離開，但我需要它像右側，對方

enter image description here

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

來源

2012-09-23 MOTIVECODEX

它看起來像你可能浮動的東西，你可以包括有關UL的CSS？ – BenOfTheNorth

你嘗試過'display：block'嗎？如果他們漂浮，刪除浮動。此外，你應該給我們你的完整的HTML和CSS代碼 – Oriol

我已經添加了CSS – MOTIVECODEX

你可以改變一些選擇：

#navigation ul, #navigation li

到

#navigation ul, #navigation > ul > li

和

#navigation ul li

到

#navigation > ul > li

來源

2012-09-23 19:29:48 simoncereska

噢，不錯，它工作，但一切都現在居中，怎麼可以我把他們放在左邊？ – MOTIVECODEX

text-align：左而不是中心 – simoncereska

刪除浮動下組織：離開;

#navigation ul li{ 
    position:relative; 
}

來源

2012-09-23 19:26:17

您的問題是

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

刪除float:left;

來源

2012-09-23 19:26:47 Oriol

我認爲這將打破他的主要名單 - 但我想他的下拉是從這個繼承，所以相反，將需要添加一個新類覆蓋這個浮點數 – BenOfTheNorth

這會破壞導航，除此之外，刪除浮點數：left對ul列表沒有任何影響，仍然與ul列表相同 – MOTIVECODEX

嘗試取出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; 
}

來源

2012-09-23 19:32:27

謝謝，但它是由simoncereska修復的 – MOTIVECODEX

換行符php和html無法正常工作

回答

相關問題