Html ul li在div左侧对齐并对齐_Html_Css

Html ul li在div左侧对齐并对齐

html css

Html ul li在div左侧对齐并对齐,html,css,Html,Css,我正在尝试将选项列表与div框的左侧对齐目前我所拥有的是： html代码： <div id="categorylist"> <ul> <li class="text-white">ALL <img src="images/all- ico.png"&

我正在尝试将选项列表与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>

我想要实现的是：

任何帮助和建议都将不胜感激

您可以使

分类列表ul

，

文本对齐：右

；而不是左侧的

#类别列表{
左边距：自动；
右边距：自动；
显示：表格；
}
#分类学家{
文本对齐：右对齐；
}



全部
娱乐发展
体育运动
教育

试试这个，对于UL，你必须让文本对齐正确，而对于li列表样式，则没有。我已经在JSFIDLE中进行了测试，它正在工作。让我知道它是否对你有效

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

#categorylist ul {
     text-align: right;
}

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

更改样式

文本对齐：左到文本对齐：右
在#categorylist ul
类中
您必须使用此更改代码
<!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>


#分类学家{
左边距：自动；
右边距：自动；
显示：表格；
}
#分类学家{
文本对齐：左对齐；
}
#分类学家李{
列表样式类型：无；}
.image列表{右边距：10px；}


全部的


社区发展


体育


教育



希望这对你有用。
如果你离开自动保证金系统，它肯定会把它放在中间。尝试向边距添加更多属性
，并尝试使用网格
获得结果。#类别列表ul{text align:right；}您的代码与图像不匹配，能否发布整个代码？
 #categorylist{
      margin: auto;
      display: table;
  }
  #categorylist ul {
      text-align: left;
  }

<!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>