Question

我试图将选项列表对齐到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;
  }

我想要达到的目的是：

非常感谢任何帮助和建议

Answer 1

您可以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>

Answer 2

试试这个，对于UL你必须正确的文本对齐和li列表样式无。我已经在jsFiddle中进行过测试，它正在运行。如果它适合您，请告诉我。

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

#categorylist ul {
     text-align: right;
}

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

Answer 3

<meta name="viewport" content="initial-scale=1.0; user-scalable=1;">

<table cellpadding=5 border=1 cellspacing=0>
  <tr bgcolor=d7d7d7>
    <td>Location</td>
    <td>This</td>
    <td>Size</td>
    <td>That</td>
    <td>Weight</td>
    <td>Grade</td>
    <td>Manufacturer</td>
    <td>Date</td>
    <td>This</td>
    <td>KG</td>
    <td>Feet</td>
    <td>Lbs</td>
  </tr>	
  <tr>
    <td>Data Location</td>
    <td>More Data</td>
    <td>More Data</td>
    <td>More Data</td>
    <td>More Data</td>
    <td>More Data</td>
    <td>Manufacturer</td>
    <td>Date</td>
    <td>More Data</td>
    <td>5555</td>
    <td>6666</td>
    <td>4444</td>
  </tr>	
</table>

Answer 4

在text-align: left; 类

中更改样式 text-align: right; #categorylist ul

Answer 5

您必须使用此更改代码。

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

希望它为你工作..

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

5 个答案: