ul li對齊並在div的左側對齊

眼前這個我有：
的html代碼：

   <div id="categorylist"> 
       <ul> 
        <li class="text-white">ALL <img src="images/all- 
        ico.png"></li> 
        <li class="text-white">COMUNNITY DEVELOPMENT <img 
        src="images/commdev-ico.png"></li> 
        <li class="text-white">SPORTS <img src="images/sports-ico.png"></li> 
        <li class="text-white">EDUCATION <img src="images/edu-ico.png"></li> 
       </ul> 

     </div>

CSS代碼：

#categorylist{ 
     margin-left: auto; 
     margin-right: auto; 
     display: table; 
    } 
    #categorylist ul { 
     text-align: left; 
    }

我想實現的是：

任何幫助和建議將不勝感激

來源

2016-11-18 rory-h

如果你把保證金自動將definetly把它放在中心。嘗試爲'margin'添加更多屬性，並嘗試使用'grid'來實現結果。 – Smit

'#categorylist ul { text-align：right; }' – connexo

您的代碼與圖片不符，您是否可以發佈整個代碼？ – k97513

您可以製作categorylist ul,text-align:right;而不是left

#categorylist{ 
 
     margin-left: auto; 
 
     margin-right: auto; 
 
     display: table; 
 
    } 
 
    #categorylist ul { 
 
     text-align: right; 
 
    }

<div id="categorylist"> 
 
       <ul> 
 
        <li class="text-white">ALL <img src="images/all- 
 
        ico.png"></li> 
 
        <li class="text-white">COMUNNITY DEVELOPMENT <img 
 
        src="images/commdev-ico.png"></li> 
 
        <li class="text-white">SPORTS <img src="images/sports-ico.png"></li> 
 
        <li class="text-white">EDUCATION <img src="images/edu-ico.png"></li> 
 
       </ul> 
 

 
     </div>

來源

2016-11-18 04:02:45 AVI

試試這個，對於UL你必須給文本對齊權和李列表樣式沒有。我已經在jsFiddle中測試過，它正在工作。讓我知道它是否適合你。

#categorylist{ 
    margin-left: auto; 
    margin-right: auto; 
    display: table; 
} 

#categorylist ul { 
    text-align: right; 
} 

#categorylist ul li { 
    list-style: none; 
}

來源

2016-11-18 04:03:23 Veer

來源

2016-11-18 04:10:27

選擇風格text-align: left;要text-align: right;在#categorylist ul類

來源

2016-11-18 04:34:16

你有這改變你的代碼。

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
      <style> 
      #categorylist{ 
       margin-left: auto; 
       margin-right: auto; 
       display: table; 
      } 
      #categorylist ul { 
       text-align: left; 
      } 
      #categorylist li{ 
       list-style-type: none;} 
      .image-list{margin-right:10px;} 
     </style> 
    </head> 
    <body> 

    <body> 

     <div id="categorylist"> 
      <ul> 
       <li class="text-white"> 
        <img class="image-list" src="images/all- 
          ico.png">ALL 
       </li> 
       <li class="text-white"> 
        <img class="image-list" src="images/commdev-ico.png">COMUNNITY DEVELOPMENT 
       </li> 
       <li class="text-white"> 
        <img class="image-list" src="images/sports-ico.png">SPORTS 
       </li> 
       <li class="text-white"> 
        <img class="image-list" src="images/edu-ico.png">EDUCATION 
       </li> 
      </ul> 

     </div> 
    </body> 

</body> 
</html>

希望這對你的工作..

來源

2016-11-18 05:04:50

謝謝......它對我有用.. – CTN

ul li對齊並在div的左側對齊

回答

相關問題