UL和李的風格應該來到右側

-1

下面

是給定的小提琴
http://jsfiddle.net/Fx9rA/UL和李的風格應該來到右側

<div id="wrap"> 

     <ul id="accordion"> 
      <li> 
       <h2 id="first">CMT</h2> 
       <div class="content"> 
        <ul id="accord"> 
         <li> 
          <a href="#" class="history_heading" rel="history_heading">HISTORY</a> 
          <ul> 
           <li><a href="#">Link One</a></li> 
           <li><a href="#">Link Two</a></li> 
           <li><a href="#">Link Three</a></li> 
           <li><a href="#">Link Four</a></li> 
           <li><a href="#">Link Five</a></li> 
          </ul> 
         </li> 

         <li> 
          <a href="#" class="geography_heading" rel="geography_heading">GEOGRAPHY</a> 
          <ul> 
           <li><a href="#">Link One</a></li> 
           <li><a href="#">Link Two</a></li> 
           <li><a href="#">Link Three</a></li> 
           <li><a href="#">Link Four</a></li> 
           <li><a href="#">Link Five</a></li> 
          </ul> 
         </li> 
        </ul> 

       </div> 
      </li> 
      <li> 
       <h2>FOIS</h2> 
       <div class="content"> 
        Tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. 
       </div> 
      </li> 
      <li> 
       <h2>ASP</h2> 
       <div class="content"> 
        Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse. 
       </div> 
      </li> 
      <li> 
       <h2>PTT</h2> 
       <div class="content"> 
        Consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
       </div> 
      </li> 
     </ul> 
    </div>

我的問題是，當我將鼠標懸停在第一個選項卡即CMT然後顯示一個包含歷史，地理列出塊是來到右側，但我希望它左側。我不知道這個問題，我也知道很少的CSS。請幫我

#wrap { 
    margin-left: 5px; 
    margin-top: 5px; 
    width: 100px; 
} 


#accordion { 
    width: 200px; 
    margin: 0px; 
    padding: 0px; 
    list-style: none; 
    border: 1px solid #ddd; 
} 

    #accordion h2 { 
     font-size: 12px; 
     font-weight: bold; 
     font-family: Arial, Helvetica, sans-serif; 
     margin: 0px; 
     text-decoration: none; 
     padding: .25em .25em .25em 2em; 
     color: #333; 
     background: url('compo_images/gradient_v_gray.gif') repeat-x; 
     background: url("./compo_images/arrow_exp_s.gif") 1em .75em no-repeat; 
     border-bottom: 1px solid #ddd; 
     cursor: pointer; 
    } 

     #accordion h2:hover { 
      background: url('compo_images/gradient_v_orange.gif') repeat-x; 
      color: white; 
     } 

    #accordion li div.content { 
     display: none; 
     padding: 5px; 
     background: #f6f7e7; 
     /*border: 1px solid #ddd;*/ 
    } 

    #accordion li:hover div.content { 
     border-bottom: 1px solid #ddd; 
     display: inherit; 
    } 

    #accordion li:hover h2 { 
     color: white; 
     background-image: url("./compo_images/arrow_exp_n.gif"); 
     background: url('compo_images/gradient_v_orange.gif') repeat-x; 
    } 

#accord > li { 
    padding-left: 5px; 
    list-style-type: none; 
} 

    #accord > li > ul { 
     list-style-type: none; 
    } 


#accord a { 
    padding: 5px; 
}

來源

2013-09-27 Harish Gupta

加 '0' 填充在下拉列表中UL：

#accord{ padding: 0; }

這從列表中刪除所有的填充。瀏覽器樣式在大多數元素上實現，有時需要刪除才能實現我們要查找的結果。

也試試，你的樣式表前進行「reset.css」 - 這會給你一張空白的畫布工作從：http://meyerweb.com/eric/tools/css/reset/

來源

2013-09-27 09:56:37

像這樣

只是在樣式表中寫*{margin:0;padding:0;}，然後你有你的解決方案。

demo

CSS

*{ 
    margin:0; 
    padding:0; 
} 
    #accord > li > ul { 
     list-style-type: none; 
    text-align:left; 
    margin:0; 
    padding:0; 


    }

來源

2013-09-27 09:55:29 falguni

不，我想歷史和地理是極端的左和他們的兄弟姐妹到它的權利 –

@HarishGupta現在我將更新我的答案請求現在檢查 – falguni

您可以使用文本對齊就根據歷史和地理類貴麗：正確或使用填充左側：？px或margin-left：？px。填充和邊距可以讓您更好地控制您想要的右側空間。

來源

2013-09-27 10:50:52 Dznr

我給出的答案是基於Fags張貼的小提琴。 – Dznr

UL和李的風格應該來到右側

回答

相關問題