HTML ul 元素没有正确居中-6ren

HTML ul 元素没有正确居中

转载作者：行者123 更新时间：2023-11-28 02:01:15

26

4

对于 HTML 来说仍然很新，如果这是一个非常简单的问题，我们深表歉意......

我在格式化时遇到了问题，我已经尝试将我的文档的导航元素居中，但它们似乎没有正确地做到这一点。

这是浏览器中问题的图像 - http://i.imgur.com/A6630.png

这是我的 HTML。 (里面有一些蛋糕 ipsum)

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>About Me Example Page:</title>
    <link href="../css/aboutcss.css" type="text/css" rel="stylesheet" />        
</head>

    <body>

        <div id="wrapper">  

            <h1><img src="../images/about/aboutlogo.png" alt="About Me" style="height:100px;"></h1>

            <nav>   

                <ul>
                <hr align="center"/>
                    <li><a href="../index.html">Home</a></li>
                    <li><a href="../portfolio/index.html">Portfolio</a></li>
                    <li><a href="../contact/index.html">Contact</a></li>
                    <li><a href="../blog/index.html">Blog</a></li>
                <hr />
                </ul>

            </nav>  

            <img src="../images/about/aboutmephoto.jpg" id="me">

            <p>Hello there!</p>

            <p>Liquorice powder liquorice dragée macaroon. Dessert oat cake pastry cheesecake wypas brownie icing. Marzipan sweet dragée icing candy wafer tart macaroon pie. Halvah liquorice pie carrot cake pie. </p>

            <p>Liquorice powder liquorice dragée macaroon. Dessert oat cake pastry cheesecake wypas brownie icing. Marzipan sweet dragée icing candy wafer tart macaroon pie. Halvah liquorice pie carrot cake pie. </p>

                <hr align="center" width="50%" />

            <p>Liquorice powder liquorice dragée macaroon. Dessert oat cake pastry cheesecake wypas brownie icing. Marzipan sweet dragée icing candy wafer tart macaroon pie. Halvah liquorice pie carrot cake pie. </p>

            <p>Liquorice powder liquorice dragée macaroon. Dessert oat cake pastry cheesecake wypas brownie icing. Marzipan sweet dragée icing candy wafer tart macaroon pie. Halvah liquorice pie carrot cake pie. </p>        

            <footer>
            &copy; Me 2012 
            </footer>

        </div>

        </body>
</html>

以及同一页面的 CSS:

    body {
background-color: #3D3D3D;
    }

    p, a, footer {
font-family: 'Open Sans', Sans Serif;
    }

    h1 * {
height: 125px;
display: block;
margin: 0 auto; 
}

    p {
color:#E2E2E2;  
font-size: 13px;
margin-left: auto;
margin-right: auto;
padding-left: 10px;
padding-right: 10px;
}

    footer {
font-size: 9px;
padding-bottom: 8px;
text-align: center; 
color:#E2E2E2;  
}

    nav {
text-align:center;  
}

    nav li {
display: inline;
    }

    nav a {
display: inline-block;  
text-decoration: none;
color: #E2E2E2;
font-size: 17px;
font-variant: small-caps;
font-weight: bold;
padding:0;
margin-left: 3em;
margin-right: 3em;
}   

    a:visited {
color:#E2E2E2;  
}

    #wrapper {
max-width: 1200px;
width: 90%;
background-color: #1A1A1A;  
margin-left: auto;
margin-right: auto; 
border-style: solid;
border-width: 2px;
border-color: black;
    }

    #me {
margin: 25px;
border-style: solid;
border-width: 5px;
border-color: #656565;
height:300px;   
float:right;
}

在此先感谢您的帮助!

最佳答案

移除 hr of ul。

并放置:

nav ul {
    border-width: 2px 0px 2px 0px ;
    border-style: solid ;
    border-color: #FFFFFF;
    padding: 5px 0px 5px 0px;
}

问候。

关于HTML ul 元素没有正确居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13813212/

26

4

0

文章推荐： c++ - 测试完成后如何强制 boost::unit_test 暂停？

文章推荐： html - 试图将页面居中，图像会从页面两侧流出

文章推荐： javascript - 具有可变列布局的响应式网格

文章推荐： html - 表格格式问题 Chrome vs IE/FireFox

jQuery:仅选择 ul，而不选择 ul ul
我正在尝试使用 jQuery 来提交一个基本的 Accordion 样式菜单。这是菜单: http://www.cybart.com/bscg/ 这是为其提供 Accordion 功能的代码片段:
html - 增加嵌套 (ul ul ul li) 下拉导航列表项的宽度
这是我的网站: http://www.simply-a-christian.com/index.html 在导航栏上，如果您移动到: 信念玛丽安教义您可以看到每个 Marian Dogma(列出了
jquery - 当 ul ul 活跃时 ul parent 移动
这可能是一个很容易回答的问题，但是，我找不到解决方案。我已经建立了一个非常简单的菜单，每当我将鼠标悬停在 ul 父项上时，它的子项 ul ul 就会变得可见。基本上它是有效的，但 parent 让位于
HTML 下拉菜单 : "nav ul ul ul li" Too Low
这是一张图片: 问题是(你可以看到):“页面”按钮太低，无法点击。我想要的是它应该靠近“联系人”。现在是代码: HTML Home About
jquery - 如何在不破坏每个

首页

博学

6Ren·AI

商城

HTML ul 元素没有正确居中