个人中心
gpt4 book ai didi

html - 如果居中，导航不会是 "break"或落到新行

转载 作者：太空宇宙 更新时间：2023-11-03 17:53:44 25 4
gpt4 key购买 nike

我正在尝试为我的堂兄创建一个网站，他连一行代码都不会。我几乎不做 :D

好吧，我可以了解一些基本的东西。

但我似乎无法弄清楚如何做这个导航栏。我面临的问题是我试图让网站响应。现在，当将窗口大小调整为较小尺寸时，代码可以正常工作(即导航栏按预期堆叠到自身上)。但是我希望四 (4) 个链接相对于标题居中。

如您所见，标题的两边都有 13% 的填充。然后我希望导航栏在剩余的 74% 中居中。希望这是有道理的，我敢打赌你们在这方面做得比我好得多。

我还没有托管网站，因此您必须自己查看代码。

我尝试添加 width:25%; 和 width:calc(100/4); 但是当我向它添加宽度时，它会居中为我希望它是这样的，但它不会掉落/打破到一个新的行，它会滑入彼此。

非常感谢您的帮助!

这是 HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/index.css">
        <title>Fanny Schwarz Design</title>
    </head>
    <body>
        <div id="container">
            <div id="header">
                <img src="main_img/fanny_schwarz_logo.jpg" class="logo" alt="Fanny Schwarz logo">
            </div>
            <div id="navigation">
                <ul>
                    <li>
                        <a href="home.html">
                            &#9830;<span style="font-size:2em;">home</span>&#9830;
                        </a>
                    </li>
                    <li>
                        <a href="portfolio.html">
                            &#9830;<span style="font-size:2em;">portfolio</span>&#9830;
                        </a>
                    </li>
                    <li>
                        <a href="about.html">
                            &#9830;<span style="font-size:2em;">about</span>&#9830;
                        </a>
                    </li>
                    <li>
                        <a href="contact.html">
                            &#9830;<span style="font-size:2em;">contact</span>&#9830;
                        </a>
                    </li>
                </ul>
            </div>
            <div id="content">
                <h2>Page heading</h2>
                <p>Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
                <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
            </div>
            <div id="footer">
                <div> 
                    <span style="vertical-align:middle; font-size:2em;">&copy;</span>
 <span style="font-size:1em; vertical-align:middle;">fanny schwarz 2014</span>

                </div>
            </div>
        </div>
    </body>
</html>

这是 CSS:

body {
    background-color:#F9E1F7;
    font-family:monospace;
}
p {
    text-align:left;
}
#container {
    padding-left:13%;
    padding-right:13%;
    background:#F9E1F7;
    margin:0 auto;
}
#header {
    background:#ccc;
    text-align:none;
    max-height:290px;
}
.logo {
    position:relative;
    max-height:100%;
    max-width:100%;
    left:0;
}
#navigation {
    width:100%;
    background:#F9E1F7;
    letter-spacing:2px;
}
#navigation ul {
    overflow:hidden;
    margin:0;
    padding:0;
}
#navigation ul li {
    list-style:none;
    float:left;
    text-align:center;
    display:inline-block;
    width: 25%;
}
#navigation li a {
    display:block;
    color:#000;
    text-decoration:none;
    padding:10px;
}
#content {
    clear:left;
    padding:20px;
}
#content h2 {
    color:#000;
    font-size:160%;
    text-align:left;
    margin:0 0 .5em;
}
#footer {
    background:#F9E1F7;
    text-align:center;
    height:1%;
    font-size:15px;
    max-height:50px;
    line-height:50px;
    padding:20px;
}
#navigation li a:hover, #navigation li a:active {
    text-decoration:underline;
}

最佳答案

以下是导致您出现问题的 CSS 样式:

#navigation ul {
overflow:hidden;
}

#navigation ul li {
float:left;
text-align:center;
width: 25%;
}

将它们更改为:

#navigation ul {
    width:100%;
    text-align:center;
    margin:0 auto;
    padding:0;
}

#navigation ul li {
    list-style:none;
    display:inline-block;
}

这应该可以解决您的问题。原因:

  1. overflow:hidden 将在移动浏览器上隐藏从您的 li 中移出的内容。

  2. float:left 没有任何问题，只是您试图使 li 居中。当应用 float:left 样式时，您不能这样做。

  3. 我认为您的意思是将 text-align:center 放在 ul 上，而不是 li。

  4. width:25% 导致您的 li 重叠而不是分到下一行。

JSFIDDLE HERE .

希望这对您有所帮助!

关于html - 如果居中，导航不会是 "break"或落到新行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26723736/

25 4 0
文章推荐： python - 如何在 Python 中创建包含不同变量的列表(矩阵)列表？
文章推荐： python - 创建具有相同属性的方法
文章推荐： python - DJANGO:如何在注册表中排序我的输入内容？
文章推荐： javascript - 使用 jquery .css() 时 rotateY 不起作用
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com