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

huangapple
go评论65阅读模式
英文:

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:

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

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:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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;
}

<!-- language: lang-html -->

&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;

<!-- end snippet -->

答案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:

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-css -->

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;
}

<!-- language: lang-html -->

&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;

<!-- end snippet -->

答案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;
}

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-css -->

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;
}

<!-- language: lang-html -->

&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;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月13日 18:47:20
  • 转载请务必保留本文链接：https://go.coder-hub.com/76242320.html
  • css
  • html
  • navbar
  • web
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定