Question

我如何调整列表？我在这做错了什么？

HTML：

<div id="footer">
  <div id="footer_content">
  <div class="footer_nav-list">
    <ul class="footer_style_list ">
          <li><a href="#">About us</a></li>
          <li><a href="#">About </a></li>
          <li><a href="#">Our Vision</a></li>
          <li><a href="#"> Technology</a></li>
          <li><a href="#">Our Customers</a></li>
    </ul>

           <ul class="footer_style_list ">
          <li><a href="#"> Solutions</a></li>
          <li><a href="#">General Descreption</a></li>
          <li><a href="#">Detailed Descreption</a></li>
      </ul>

          <ul class="footer_style_list ">
        <li><a href="customers.html">Customers</a>  
          <li><a href="#"> fdhfdhfdhfdh</a></li>
          <li><a href="#">Customers List</a></li>
       </ul>

         <ul class="footer_style_list ">
        <li><a href="#">Contact Us</a></li>
          <li><a href="#">Map</a></li>
          <li><a href="#">Contact Information</a></li>
          <li><a href="#"> Call Me Back</a></li>
       </ul>
   </div>
    <div id="bottom_nav"><span> © 2014</span>
<span>dgfdhfdhdfhdfhl</span>
<span>dfhfdhfdhfdhfdhdfh</span>
<span>fdhfdhdfhdfhhfd.com</span></div><!--close bottom_nav-->

</div></div>

Answer 1

.footer_style_list ul {
    float: left;
    width: 130px;
}

应该是：

.footer_style_list {
    float: left;
    width: 130px;
}

正如您的html：

<ul class="footer_style_list ">

您试图在ul内定位ul。毫无意义。

DEMO

注意：我确定您可以对其余问题进行排序。

全部排序，阅读代码并尝试理解它。我做得很少。

DEMO HERE

Answer 2

由于以下一段CSS代码，链接在中心对齐，即“text-align：center”

.footer_style_list  > li > a {
  color: #000;
  text-decoration: none;
  position: absolute;
  width: 120px;
  height: 30px;
  text-align: center;
  padding-top: 12px;
  box-sizing: border-box;
}

如果您想左对齐，只需进行以下更改：

text-align: left;

Answer 3

我修复了它评论一些css代码

Your code modified

.footer_style_list  > li {

  margin: 0;
  display: block;
  width: 120px;
  /*height: 30px;*******************/
  position: relative;
  line-height: 30px;
  color: #000;
}

.footer_style_list  > li > a {
  color: #000;
  text-decoration: none;
  /*position: absolute;****************/
  width: 120px;
  height: 30px;
  text-align: center;
  padding-top: 12px;
  box-sizing: border-box;
}

如何对齐ul列表

3 个答案: