如何讓我的下拉文本左對齊？

-1

我想左對齊我的Dropdown和父子菜單文本。我也希望我的標籤文本總是正確的。我怎樣才能做到這一點？如何讓我的下拉文本左對齊？

這裏是我的代碼：

<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 

 

 
<style> 
 
    /* Pure CSS3 Multi Level Drop Down Navigation Menu */ 
 
    /*    By www.Bloggermint.com   */ 
 
    
 
    #nav { 
 
    position: relative; 
 
    /*position of navbar right and left*/ 
 
    left: auto; 
 
    float: left; 
 
    font: 12px calibri, Helvetica, Sans-serif; 
 
    border: 1px solid #121314; 
 
    border-top: 1px solid #2b2e30; 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
    overflow: visible; 
 
    line-height: 10px; 
 
    /* change the border height of the menu*/ 
 
    } 
 
    
 
    #nav ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    } 
 
    
 
    #nav ul li { 
 
    float: left; 
 
    } 
 
    
 
    #nav ul li a { 
 
    float: left; 
 
    color: #d4d4d4; 
 
    padding: 4px 27px; 
 
    /* change the width of whole menu*/ 
 
    text-decoration: none; 
 
    background: #3C4042; 
 
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0.09, rgb(59, 63, 65)), color-stop(0.55, rgb(72, 76, 77)), color-stop(0.78, rgb(75, 77, 77))); 
 
    background: -moz-linear-gradient(center bottom, rgb(59, 63, 65) 9%, rgb(72, 76, 77) 55%, rgb(75, 77, 77) 78%); 
 
    background: -o-linear-gradient(center bottom, rgb(59, 63, 65) 9%, rgb(72, 76, 77) 55%, rgb(75, 77, 77) 78%); 
 
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset; 
 
    border-left: 1px solid rgba(255, 255, 255, 0.05); 
 
    border-right: 1px solid rgba(0, 0, 0, 0.2); 
 
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6); 
 
    } 
 
    
 
    #nav ul li a:hover, 
 
    #nav ul li:hover>a { 
 
    color: #FFF; 
 
    /* change tabs font hover color */ 
 
    background: #3C4042; 
 
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0.09, rgb(77, 79, 79)), color-stop(0.55, rgb(67, 70, 71)), color-stop(0.78, rgb(69, 70, 71))); 
 
    background: -moz-linear-gradient(center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%); 
 
    background: -o-linear-gradient(center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%); 
 
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000; 
 
    } 
 
    
 
    #nav li ul a:hover, 
 
    #nav ul li li:hover>a { 
 
    color: #FFF; 
 
    /* change the drop down font color*/ 
 
    background: #5C9ACD; 
 
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0.17, rgb(61, 111, 177)), color-stop(0.51, rgb(80, 136, 199)), color-stop(1, rgb(92, 154, 205))); 
 
    background: -moz-linear-gradient(center bottom, rgb(61, 111, 177) 17%, rgb(80, 136, 199) 51%, rgb(92, 154, 205) 100%); 
 
    background: -o-linear-gradient(center bottom, rgb(61, 111, 177) 17%, rgb(80, 136, 199) 51%, rgb(92, 154, 205) 100%); 
 
    border-bottom: 1px solid rgba(0, 0, 0, 0.6); 
 
    border-top: 1px solid #7BAED9; 
 
    text-shadow: 0 1px rgba(255, 255, 255, 0.3); 
 
    } 
 
    
 
    #nav li ul { 
 
    overflow: visible; 
 
    background: #3C4042; 
 
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.09, rgb(77, 79, 79)), color-stop(0.55, rgb(67, 70, 71)), color-stop(0.78, rgb(69, 70, 71))); 
 
    background-image: -moz-linear-gradient(center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%); 
 
    background-image: -o-linear-gradient(center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%); 
 
    border-radius: 0 0 30px 30px; 
 
    -moz-border-radius: 0 0 10px 10px; 
 
    -webkit-border-radius: 0 0 10px 10px; 
 
    left: -999em; 
 
    margin: 25px 0 0; 
 
    /* change the position of drop down menu, up and down.*/ 
 
    position: absolute; 
 
    width: 200px; 
 
    z-index: 9999; 
 
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
 
    -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
 
    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
 
    border: 1px solid rgba(0, 0, 0, 0.5); 
 
    } 
 
    
 
    #nav li:hover ul { 
 
    left: auto; 
 
    } 
 
    
 
    #nav li ul a { 
 
    background: none; 
 
    border: 0 none; 
 
    margin-right: 0; 
 
    width: 198px; 
 
    /* change the border drop down menu border size*/ 
 
    box-shadow: none; 
 
    -moz-box-shadow: none; 
 
    -webkit-box-shadow: none; 
 
    border-bottom: 1px solid transparent; 
 
    border-top: 1px solid transparent; 
 
    } 
 
    
 
    #nav li li ul { 
 
    margin: -1px 0 0 197px; 
 
    /*change the parent drop down list position, Right, Left*/ 
 
    -webkit-border-radius: 0 10px 10px 10px; 
 
    -moz-border-radius: 0 10px 10px 10px; 
 
    border-radius: 0 10px 10px 10px; 
 
    visibility: hidden; 
 
    } 
 
    
 
    #nav li li:hover>ul { 
 
    visibility: visible; 
 
    } 
 
    
 
    #nav li:hover>ul { 
 
    left: auto; 
 
    } 
 
    
 
    #nav ul ul li:last-child>a { 
 
    -moz-border-radius: 0 0 10px 10px; 
 
    -webkit-border-radius: 0 0 10px 10px; 
 
    border-radius: 0 0 10px 10px; 
 
    } 
 
    
 
    #nav ul ul ul li:first-child>a { 
 
    -moz-border-radius: 0 10px 0 0; 
 
    -webkit-border-radius: 0 10px 0 0; 
 
    border-radius: 0 10px 0 0; 
 
    } 
 
    
 
    header { 
 
    border-top: 0px solid gold !important; 
 
    /*move header pic up and down*/ 
 
    margin-top: -43px !important; 
 
    } 
 
</style> 
 

 
<header style="position: relative; top: 6px;"> 
 
    <div id="nav"> 
 
    <ul> 
 
     <li><a href="https://lighthouse786.blogspot.com/">Home</a></li> 
 
     <li><a href="#">Books</a> 
 
     <ul> 
 
      <li><a href="#">By Author &nbsp;&nbsp;&nbsp;<font size="1"> &#9658; </font></a> 
 
      <ul> 
 
       <li><a href="https://lighthouse786.blogspot.com/p/pir-naseer-ud-din.html">Pir Nasir Ud Din</a></li> 
 
       <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Ashfaq Ahmed</a></li> 
 
       <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Wasif Ali Wasif</a></li> 
 
       <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Abu Yahya</a></li> 
 
      </ul> 
 
      </li> 
 

 
      <li><a href="https://lighthouse786.blogspot.com/p/poetry-books.html">Poetry Books &nbsp;&nbsp;&nbsp;<font size="1"> &#9658; </font></a> 
 
      <ul> 
 
       <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Allama Iqbal</a></li> 
 
       <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Mir Taqi Mir</a></li> 
 
       <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Mirza Ghalib</a></li> 
 
       <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Faiz Ahmed Faiz</a></li> 
 
       <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Ahmed Faraz</a></li> 
 
       <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Mohsin Naqwi</a></li> 
 
       <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Ibne Insha</a></li> 
 
       <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Parveen Shakir</a></li> 
 
       <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Bano Qudsia</a></li> 
 

 
      </ul> 
 
      </li> 
 

 
      <li><a href="https://lighthouse786.blogspot.com/p/islamic-books.html">Islamic Books</a></li> 
 

 
      <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Knowledge Books</a></li> 
 
      <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Computer Books</a></li> 
 
      <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Programming Books</a></li> 
 

 
     </ul> 
 
     </li> 
 

 
     <li><a href="#">Authors & Scholars</a> 
 
     <ul> 
 
      <li><a href="https://lighthouse786.blogspot.com/p/blog-page.html">Moulana Tariq Jamil</a></li> 
 
      <li><a href="https://lighthouse786.blogspot.com/p/pir-naseer-ud-din.html">Pir Nasir Ud Din Shah</a></li> 
 
      <li><a href="https://lighthouse786.blogspot.com/p/ghulam-muhammad-dard_29.html">Ghulam Muhammad Dard</a></li> 
 
      <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Something New</a></li> 
 
      <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Our Vision</a></li> 
 
     </ul> 
 
     </li> 
 

 

 
     <li><a href="#">Sofwares</a> 
 
     <ul> 
 
      <li><a href="https://lighthouse786.blogspot.com/p/softwares.html">Antivirus</a></li> 
 
      <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Level 2.2</a></li> 
 
      <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Registered Apps <font size="1"> &#9658; </font> </a> 
 

 
      <ul> 
 
       <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Level 2.3.1</a></li> 
 
       <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Level 2.3.2</a></li> 
 
       <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Level 2.3.3 &nbsp;&nbsp;&nbsp; <font size="1"> &#9658; </font></a> 
 

 

 
       <ul> 
 
        <li><a href='https://lighthouse786.blogspot.com/p/coming-soon.html'>SUB-CATEGORY 2A</a></li> 
 
        <li><a href='https://lighthouse786.blogspot.com/p/coming-soon.html'>SUB-CATEGORY 2B</a></li> 
 
       </ul> 
 

 

 

 

 

 

 
       </li> 
 
       <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html">Level 2.3.4</a></li> 
 
       <li> 
 
       <a href=https://lighthouse786.blogspot.com/p/coming-soon.html ">Level 2.3.5</a></li> 
 

 
\t \t <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html ">Level 2.3.6</a></li> 
 
\t \t <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html ">Level 2.3.7</a></li> 
 
\t \t </ul> 
 
\t </li> 
 
\t <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html ">Level 2.4</a></li> 
 
\t <li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html ">Level 2.5</a></li> 
 
\t </ul> 
 

 
</li> 
 
<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html ">Services</a></li> 
 
<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html ">Contact Us</a></li> 
 
<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html ">About Me</a></li> 
 
<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html ">AlhamduLillah</a></li> 
 
<li><a href="https://lighthouse786.blogspot.com/p/coming-soon.html ">Who We Are</a></li> 
 

 

 
</ul> 
 

 
</div></header> 
 

 

 
</!doctype>

來源

2017-10-07 Faisal

耶穌。冷靜。 – mumpitz

好的，謝謝你bro – Faisal

你的代碼中沒有什麼能夠集中文本。你確定沒有其他的CSS參與嗎？ – mumpitz

這可能幫助：

.sub-menu { 
    text-align: left; 
}

來源

2017-10-09 17:49:27

如何讓我的下拉文本左對齊？

回答

相關問題