当前位置: 首页 > 面试题库 >

为什么我不能保证金居中:0自动?

钦景胜
2023-03-14
问题内容

我有一个#headerdiv,100% width在该div内,我有一个无序列表。我已将其应用于margin: 0 auto无序列表,但不会在标头div中居中。

有人可以告诉我为什么吗?我认为,如果我定义父div的宽度,那么无序列表应该能够以居中margin: 0 auto。我想念什么?

这是我的代码

<style>

* {
    margin: 0;
    padding: 0;
}

#header {
    width: 100%;    
    background-color: #333;
    min-height: 160px;
    font-family:Arial, Helvetica, sans-serif;
}

#sitename {
    font-size: 50px;
    width: 620px;
    margin:0 auto;
    padding-top: 35px;
    color:#999;
}

#header ul {
    float: right;
    margin: 0 auto;
}

#header ul li {
    float: left;
    padding-right: 20px;
    list-style-type: none;
    font-size: 20px;
}

</style>

</head>

<body>

<div id="header">
    <h1 id="sitename">Photography Auction Site</h1>

    <ul>
        <li>List of Photos</li>
        <li>Image Gallery</li>
        <li>Contact Us</li>
    </ul>
</div>

</body>
</html>

问题答案:

您需要定义要居中的元素的宽度,而不是父元素。

#header ul {
    margin: 0 auto;
    width: 90%;
}

编辑 :好的,我现在已经看到了测试页,这就是我认为您想要的:

#header ul {
    list-style:none;
    margin:0 auto;
    width:90%;
}

/* Remove the float: left; property, it interferes with display: inline and 
 * causes problems. (float: left; makes the element implicitly a block-level
 * element. It is still good to use display: inline on it to overcome a bug
 * in IE6 and below that doubles horizontal margins for floated elements)
 * The styles below is the full style for the list-items. 
 */
#header ul li {
    color:#CCCCCC;
    display:inline;
    font-size:20px;
    padding-right:20px;
}


 类似资料:
  • 问题内容: 从JavaDoc: 验证此容器及其所有子组件。验证容器意味着布置其子组件。 那就是我想做的。使用尽可能轻巧的组件。但是当我这样做时,对的调用不会使组件“有效”。 为什么我不能做一个有效的? 问题答案: 在文档中说: 当组件在其父容器中的大小和位置正确且其所有子组件也均有效时,该组件才有效。 这种情况,直到你达到顶级容器(,或)。在您所遇到的问题的示例中,您没有父母,所以它永远不会有效。

  • 问题内容: 我正在进行一些高级IE8测试,似乎旧的使用技巧在IE8中并非在所有情况下都有效。 以下HTML给出了FF3,Opera,Safari,Chrome,IE7和IE8兼容的居中按钮,但在IE8标准中却 没有 : (作为一种解决方法,我可以为按钮添加一个显式的宽度)。 所以问题是:哪种浏览器正确?还是这是行为未定义的情况之一? (我的想法是 所有 浏览器都不正确-如果按钮的“显示:阻止”按钮

  • 主要内容:可见性,原子性,举个例子首先要了解的是,volatile可以保证可见性和顺序性,这些都很好理解,那么它为什么不能保证原子性呢? 可见性 可见性与Java的内存模型有关,模型采用缓存与主存的方式对变量进行操作,也就是说,每个线程都有自己的缓存空间,对变量的操作都是在缓存中进行的,之后再将修改后的值返回到主存中,这就带来了问题,有可能一个线程在将共享变量修改后,还没有来的及将缓存中的变量返回给主存中,另外一个线程就对共享变量

  • 主要内容:可见性,原子性,举个例子首先要了解的是,volatile可以保证可见性和顺序性,这些都很好理解,那么它为什么不能保证原子性呢? 可见性 可见性与Java的内存模型有关,模型采用缓存与主存的方式对变量进行操作,也就是说,每个线程都有自己的缓存空间,对变量的操作都是在缓存中进行的,之后再将修改后的值返回到主存中,这就带来了问题,有可能一个线程在将共享变量修改后,还没有来的及将缓存中的变量返回给主存中,另外一个线程就对共享变量

  • 问题内容: 我的元素彼此相邻。 我想在它们之间进行设置,但没有效果。为什么? 我的代码: 问题答案: 原因 从MDN文档中: [margin属性]适用于除表标题,表和内联表以外的其他表显示类型的元素以外的所有元素 换句话说,该物业是 不 适用的元素。 解 考虑改为使用该属性。 请注意,应将其应用于具有布局和的父元素。 例如: HTML CSS 水平和垂直方向的边距不同 正如迭戈·基洛斯(Diego

  • 问题内容: 我有一个简单的程序: 当我运行该程序时,我看到的只是用于输出。我原本希望我们会遇到第一轮,然后是,然后是etc。 这是由于这样的事实,一旦我们尝试在左侧重新声明,其值就会重置为? 如果有人可以指出我的详细情况,那将很棒。 更改为,似乎正在按预期方式打印数字。我对它达到最大32位值的速度感到惊讶! 问题答案: 该问题是由于整数溢出引起的。 在32位二进制补码算法中: 确实确实开始具有2的