Question

您好，在这里尊敬的开发人员，我是Web开发和尝试构建网站的新手。这是CSS代码的问题，中间的导航栏项目（.nav_links li）不会停留在一行，因为它将导航栏中的趋势项推到换行符开始，如帖子中的附加图片所示（请参阅所附图片）。我希望所有项目都保持一行，并且项目之间的间距相同。也许解决方法很简单，非常感谢您的帮助，谢谢

HTML

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <link href="styles.css" rel="stylesheet">
        <title>N Dress Boutique. Now Shop Everything at your Finger Tips</title>
    </head>
    <body>
        <header>
            <h4 class="logo">N</h4>
            <nav class='nav1'>
                <ul class='nav_links'>
                    <a><li href="#home">Home</li></a>
                    <a><li href="#dresses">Dresses</li></a>
                    <a><li href="#trends">Trends</li></a>
                </ul>
            </nav>
            <a href="#"><button class="button">Contact</button></a>
        </header>
    </body>
    </html>

CSS：

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color:#b7b7b7;
}

body {
    background-color: black;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10%;
    background-color: #332323;
}

.logo {
    cursor: pointer;
    color: white;
    font-size:large;
}

.nav_links li  {
    display: inline-block;
    width: 40%;
    padding-left: 3%;
    padding-right: 10%;
    cursor: pointer;
    border-left: 1px solid white;
    
}

.button {
    background-color: #302b2b;
    padding: 5px 10%;
    color:white;
}

Answer 1

您只能将每个项目的宽度设置为40％。如果希望他们都留在同一行，则应将其更改为33％或30％。

Answer 2

解决此问题的最简单方法是使用表格。它使您的项目始终适合同一行。请注意，表必须足够小，否则它将从屏幕上溢出。

CSS导航栏项目

2 个答案: