2023年5月13日 18:47:20go评论61阅读模式

英文:

Make navbar with 4 columns

问题

我想在我的导航栏中有4列，就像图片中显示的那样：

.nav__links li a {
    border: 1px solid black;
    width: 225px;
    height: 70px;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
}

希望盒子内的文本居中，就像盒子的中间一样。

英文:

i want to have 4 columns in my navbar like shown in the picture:

And the text inside the boxes should be centered, like in the middle of the box. Its importent that thy're boxes so that i can apply "border-bottom" to it. Can somebody pls help, i cant figure it out myself. Heres what i got so far:

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 70px;
    padding: 0px 10%;
    background-color: #EFEFEF;
}

.logo {
    cursor: pointer;
    text-decoration: none;
    color: #707070;
    font-family: &#39;Segoe UI&#39;, Tahoma, Geneva, Verdana, sans-serif;
}

.nav__links a,
.cta,
.overlay__content a {
    font-family: &quot;Montserrat&quot;, sans-serif;
    font-weight: 500;
    color: #707070;
    text-decoration: none;
}

.nav__links {
    list-style: none;
    display: flex;
}

.nav__links li a {
    border: 1px solid black;
    width: 225px;
    height: 70px;
    float: left;
}

#active {
    border-bottom: 8px green solid;
}

.cta {
    padding: 9px 25px;
    background-color: rgba(0, 136, 169, 1);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.3s ease 0s;
}

&lt;body&gt;
    &lt;header&gt;
        &lt;a class=&quot;logo&quot; href=&quot;/&quot;&gt;filmfestwilsdruff.de&lt;/a&gt;
        &lt;nav&gt;
            &lt;ul class=&quot;nav__links&quot;&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot; id=&quot;active&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;blabla&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;blabla&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;blablabla&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/nav&gt;
        &lt;a class=&quot;cta&quot; href=&quot;#&quot;&gt;Contact&lt;/a&gt;
    &lt;/header&gt;
&lt;/body&gt;

答案1

得分: 0

你可以使用2行CSS来水平和垂直居中：

text-align: center; /* 居中文本 */
line-height: 70px; /* 使高度匹配以在中间对齐 */

这是代码片段：

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 70px;
    padding: 0px 10%;
    background-color: #EFEFEF;
}

.logo {
    cursor: pointer;
    text-decoration: none;
    color: #707070;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.nav__links a,
.cta,
.overlay__content a {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    color: #707070;
    text-decoration: none;
}

.nav__links {
    list-style: none;
    display: flex;
}

.nav__links li a {
    border: 1px solid black;
    width: 225px;
    height: 70px;
    float: left;
    text-align: center; /* 居中链接 */
    line-height: 70px; /* 使高度匹配以在中间对齐 */
}

#active {
    border-bottom: 8px green solid;
}

.cta {
    padding: 9px 25px;
    background-color: rgba(0, 136, 169, 1);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.3s ease 0s;
}

<body>
    <header>
        <a class="logo" href="/">filmfestwilsdruff.de</a>
        <nav>
            <ul class="nav__links">
                <li><a href="#" id="active">Home</a></li>
                <li><a href="#">blabla</a></li>
                <li><a href="#">blabla</a></li>
                <li><a href="#">blablabla</a></li>
            </ul>
        </nav>
        <a class="cta" href="#">Contact</a>
    </header>
</body>

英文:

You can center horizontally et verticaly using 2 lines of CSS :

    text-align: center; /* center the link */
    line-height: 70px; /* match the height to align in the middle */

Here's the snippet:

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 70px;
    padding: 0px 10%;
    background-color: #EFEFEF;
}

.logo {
    cursor: pointer;
    text-decoration: none;
    color: #707070;
    font-family: &#39;Segoe UI&#39;, Tahoma, Geneva, Verdana, sans-serif;
}

.nav__links a,
.cta,
.overlay__content a {
    font-family: &quot;Montserrat&quot;, sans-serif;
    font-weight: 500;
    color: #707070;
    text-decoration: none;
}

.nav__links {
    list-style: none;
    display: flex;
}

.nav__links li a {
    border: 1px solid black;
    width: 225px;
    height: 70px;
    float: left;
    text-align: center; /* center the link */
    line-height: 70px; /* match the height to align in the middle */
}

#active {
    border-bottom: 8px green solid;
}

.cta {
    padding: 9px 25px;
    background-color: rgba(0, 136, 169, 1);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.3s ease 0s;
}

&lt;body&gt;
    &lt;header&gt;
        &lt;a class=&quot;logo&quot; href=&quot;/&quot;&gt;filmfestwilsdruff.de&lt;/a&gt;
        &lt;nav&gt;
            &lt;ul class=&quot;nav__links&quot;&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot; id=&quot;active&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;blabla&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;blabla&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;blablabla&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/nav&gt;
        &lt;a class=&quot;cta&quot; href=&quot;#&quot;&gt;Contact&lt;/a&gt;
    &lt;/header&gt;
&lt;/body&gt;

答案2

得分: 0

Sure, here are the translated parts:

1) To Align Content

Flexbox 在垂直和水平方向上都很适合对齐内容。

在要居中的项目的父元素上添加 display: flex
justify-content 用于在 x 轴（水平方向）上对齐内容
align-items 用于在交叉轴（垂直方向）上对齐内容

将以下 CSS 样式添加到 .nav__links li a：

.nav__links li a {
    display: flex;
    justify-content: center;
    align-items: center;
}

2) To Align #active Bottom Border

使用 box-shadow 来模拟底部边框，值为 inset，使其位于内容元素内部。

#active {
    box-shadow: inset 0 -8px 0 green;
}

我已经提供了翻译，如果需要进一步的帮助，请告诉我。

英文:

1) To Align Content

Flexbox is great to align content vertically and horizontally.

Add display: flex to the parent element of the items to be centered
justify-content will align content on the x-axis (horizontal)
align-items will align content on the cross-axis (vertical)

Append the following CSS styles to .nav__links li a

.nav__links li a {
    display: flex;
    justify-content: center;
    align-items: center;
}

2) To Align #active Bottom Border

Using a box-shadow to replicate the bottom border with a value of inset so it's inside the content element.

#active {
    box-shadow: inset 0 -8px 0 green;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 70px;
    padding: 0px 10%;
    background-color: #efefef;
}

.logo {
    cursor: pointer;
    text-decoration: none;
    color: #707070;
    font-family: &quot;Segoe UI&quot;, Tahoma, Geneva, Verdana, sans-serif;
}

.nav__links a,
.cta,
.overlay__content a {
    font-family: &quot;Montserrat&quot;, sans-serif;
    font-weight: 500;
    color: #707070;
    text-decoration: none;
}

.nav__links {
    list-style: none;
    display: flex;
}

.nav__links li a {
    display: flex;
    align-items: center;
    justify-content: center;
    
    border: 1px solid black;
    width: 225px;
    height: 70px;
    float: left;
}

#active {
    box-shadow: inset 0 -8px 0 green;
}

.cta {
    padding: 9px 25px;
    background-color: rgba(0, 136, 169, 1);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.3s ease 0s;
}

&lt;body&gt;
    &lt;header&gt;
        &lt;a class=&quot;logo&quot; href=&quot;/&quot;&gt;filmfestwilsdruff.de&lt;/a&gt;
        &lt;nav&gt;
            &lt;ul class=&quot;nav__links&quot;&gt;
                &lt;li id=&quot;active&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;blabla&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;blabla&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;blablabla&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/nav&gt;
        &lt;a class=&quot;cta&quot; href=&quot;#&quot;&gt;Contact&lt;/a&gt;
    &lt;/header&gt;
&lt;/body&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

创建一个带有4列的导航栏。

问题

答案1

答案2

文本输入自动完成需要2次点击。

如何在CSS中实现鼠标悬停时防止元素变大时影响其他元素的位置？

Sum the cell from another cell in html using jquery and show result in another cell

防止多个音频同时播放在JavaScript中。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论