Question

由于某种原因，下面的代码不是我的无序列表的中心（我在html中有边距样式）。我无法弄清楚为什么......任何想法？

HTML：

<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="StyleSheet" type="text/css" href="organicForUs.css" />
</head>
<body>
    <div id="content">
        <img id="logo" src="logo.png" />
    </div>
    <div id="footie" style="margin-left: auto; margin-right: auto;">
        <ul>
            <li><p id="aboutP">about</p></li>
            <li><p id="addP">add your store</p></li>
            <li><p id="reportP">report a missing store</p></li>
            <li><p id="advertiseP">advertise with us</p></li>
        </ul>
    </div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="organicForUs.js"></script>
</body>

的CSS：

#footie li {
list-style-type: none;
float: left;
  }
 #footie p {
font-family: sans-serif;
font-size: 11px;
color: white;
font-weight: bold;
padding-left: 10px;
}

Answer 1

首先，您有保证金适用于UL的父母，而不是UL。如果你想要UL，而不是#footie，你将不得不移动样式声明（无论如何都不应该内联）。

此外，对于边距：自动技巧，您需要声明宽度。类似的东西：

#footie ul {
    width: 600px;
    margin: 0 auto;
}

Answer 2

上面提出的解决方案有一个警告：您需要预先指定＆lt; div＆gt;的宽度。如果将更多项添加到ul中，这将会中断。这是一个更好的解决方案：

#footie {
  float:left;       ***
  width:100%;       ***
  overflow:hidden;  ***
  position:relative;***
}
#footie ul {
 clear:left;
 float:left;
 list-style:none;
 margin:0;
 padding:0;
 position:relative;  ***
 left:50%;           ***
 text-align:center; // optional, if you want to center the text
}
#centeredmenu ul li {
  position:relative; ***
  display:block;
  float:left;
  list-style:none;
  margin:0;
  padding:0;
  right:50%;         ***
}

请注意，标有三颗星（***）的线条是绝对必要的线条。

但这种解决方案更具动态性。参考这篇文章： http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

玩得开心！

用css将div中的浮动ul居中

2 个答案: