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的左侧对齐

回答

相关问题