简体   繁体   English

div中的中心列表(用于导航栏)

[英]Center list in div (for navigation bar)

Going off of the note at the top of this tutorial ( http://css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/ ), I tried to center a list of two links in the page, but it is centering only the first list item, not the entire list. 在本教程顶部的注释( http://css-tricks.com/centering-list-items-horizo​​ntally-slightly-trickier-than-you-might-think/ )的基础上,我尝试将列表居中页面中两个链接的位置,但它仅将第一个列表项居中,而不是整个列表的居中。

li{
    font-family: Futura, Arvo, sans-serif;
    display: inline-block;
}
ul{
    text-align: center;
}

div#nav-list {

    left: 0;
    right: 0;
    margin-right: auto;
    margin-left: auto;

    width: auto;
    height: auto;
    background: #E8E8E8;
}

"nav-list" is the container for the navigation bar, shown in the picture colored grey. “导航列表”是导航栏的容器,如灰色图片所示。

Here is the issue- you can see that "about" is centered, but not the entire list. 这是问题所在-您可以看到“关于”居中,而不是整个列表居中。 在此处输入图片说明

Thanks in advance! 提前致谢! Edit: Here's the HTML: 编辑:这是HTML:

<div id="center_content">
    <h1 id="page-heading">Title</h1>
    <hr id="first-rule"></hr>
    <div id="nav-list">
        <ul>
            <li>about</li> <li>work</li> 
        </ul>
    </div>
    <hr></hr>
    <p>Here is a paragraph. </p>
</div>

Remove the list padding. 删除列表填充。 By default, list have a 40px padding-left. 默认情况下,列表的左边距为40px Try to use ul{ padding:0; } 尝试使用ul{ padding:0; } ul{ padding:0; }

Try apply these styles : 尝试应用以下样式:

ul { 
    margin: 0 auto;
    padding: 0;
    text-align: center;
    width: 170px; /*as per your need*/
}

Hows this for you: http://jsfiddle.net/theStudent/6UnNs/ 您的情况如何: http//jsfiddle.net/theStudent/6UnNs/

CSS CSS

li {
    font-family: Futura, Arvo, sans-serif;
    display: inline-block;
    padding: 10px;
}

ul {
    text-align: center;
    background:red;
    width: 25%;
    margin:0 auto;
}
ul li:first-child {

    background:#ccc;
    display:block;
    margin:0 0 0 -40px;
}

HTML HTML

<ul>
    <li>TITLE</li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 2</li>
</ul>

Just play with settings I added some color so you can see 只是玩我添加了一些颜色的设置,所以您可以看到

try this 尝试这个

<div>
<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

div ul li{float:left;list-style:none;margin:0 10px}
div ul{display: inline-block;margin: 0 auto;}
div{text-align:center}

JSFiddle 的jsfiddle

Here you go: 干得好:

1) Set text-align: center; 1)设置text-align: center; on the nav-list element 在nav-list元素上

2) Set d isplay: inline-block on the list 2)设置d isplay: inline-block列表中的isplay: inline-block

FIDDLE 小提琴

li {
    font-family: Futura, Arvo, sans-serif;
    display:inline-block;
    padding: 0 10px;
}
ul{

    list-style: none;
    display: inline-block;
    padding:0;
}

div#nav-list {

    text-align: center;
    background: #E8E8E8;
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM