Question

我在我网站的顶部导航中使用了display：flex。问题是我的代码中标记为“Home”的链接比“Home”链接后面的其他链接略高。我想要的是主页链接应显示在显示其他链接的同一行，但我无法做到。

我已在<style>标记中发布了我的HTML和CSS。希望有人知道该怎么做？感谢..

<!doctype html>
<html>
<head>
<style>
.Navigation2{
    display: flex;
    flex-direction: row; 
    /*position: relative;*/
    font-family: "Segoe UI",Arial,sans-serif;
    font-size: 17px;
    letter-spacing: 4px;
    background-color: #4caf50;
    width: 100%;
    padding: 14px 0px;
}
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
}

.dropdown:hover .dropdown-content {
    display: inline-block;
    position: absolute;
    background-color: #4caf50;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}
.Navigation2 a{color: #ffffff; text-decoration: none; padding: 14px 16px;}
.Navigation2 a#MyFacebook{display: block;}
.Navigation2 p#find {background-color: transparent; float: right; color: white; padding: 14px 16px; display: block; margin: 0px; /*position: relative; bottom: 12px;*/}
.Navigation2 p#find input{padding: 3px; border: 1px solid blue; /*position: relative; bottom: 2px;*/ border-radius: 7px;}
</style>
</head>
<body>
<div class="Navigation2">
    <div class="dropdown">
    <a class="Home" href="NewFile.html">TUTORIALS</a>   
    <div class="dropdown-content">
    <a>HTML</a><br>
    <a>CSS</a><br>
    <a>Javascript</a><br>
    <a>JQuery</a><br>
    <a>Bootstrap</a><br>
    </div>
    </div>
    <a href="#">REFERENCES</a>
    <a href="#">EXAMPLES</a>
    <p id="find">Find: <input type="search" autofocus></p>
    <a href = "https://www.facebook.com/" id="MyFacebook"> MY FACEBOOK PAGE </a>
  </div>
 </body>
 </html>

Answer 1

在Navigation2课程中，添加

align-items: 'center'

这将使孩子们在中间对齐垂直对齐。

Answer 2

要达到预期的结果，请将下拉类设为display：flex

.dropdown {
    position: relative;
    display: flex;
}

代码示例 - https://codepen.io/nagasai/pen/bvyNrB

.Navigation2{
    display: flex;
    flex-direction: row; 
    /*position: relative;*/
    font-family: "Segoe UI",Arial,sans-serif;
    font-size: 17px;
    letter-spacing: 4px;
    background-color: #4caf50;
    width: 100%;
    padding: 14px 0px;
}
.dropdown {
    position: relative;
    display: flex;
}

.dropdown-content {
    display: none;
}

.dropdown:hover .dropdown-content {
    display: inline-block;
    position: absolute;
    background-color: #4caf50;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}
.Navigation2 a{color: #ffffff; text-decoration: none; padding: 14px 16px;}
.Navigation2 a#MyFacebook{display: block;}
.Navigation2 p#find {background-color: transparent; float: right; color: white; padding: 14px 16px; display: block; margin: 0px; /*position: relative; bottom: 12px;*/}
.Navigation2 p#find input{padding: 3px; border: 1px solid blue; /*position: relative; bottom: 2px;*/ border-radius: 7px;}

<head>
</head>
<body>
<div class="Navigation2">
    <div class="dropdown">
    <a class="Home" href="NewFile.html">TUTORIALS</a>   
    <div class="dropdown-content">
    <a>HTML</a><br>
    <a>CSS</a><br>
    <a>Javascript</a><br>
    <a>JQuery</a><br>
    <a>Bootstrap</a><br>
    </div>
    </div>
    <a href="#">REFERENCES</a>
    <a href="#">EXAMPLES</a>
    <p id="find">Find: <input type="search" autofocus></p>
    <a href = "https://www.facebook.com/" id="MyFacebook"> MY FACEBOOK PAGE </a>
  </div>
 </body>

Answer 3

＆＃13;

.Navigation2{
    display: flex;
    flex-direction: row;
    /*position: relative;*/
    font-family: "Segoe UI",Arial,sans-serif;
    font-size: 17px;
    letter-spacing: 4px;
    background-color: #4caf50;
    width: 100%;
    padding: 14px 0px;
    align-items: center;
}
.dropdown {
    position: relative;

}

.dropdown-content {
    display: none;
}

.dropdown:hover .dropdown-content {

    background-color: #4caf50;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}
.Navigation2 a{color: #ffffff; text-decoration: none; padding: 14px 16px;}
.Navigation2 a#MyFacebook{display: block;}
.Navigation2 p#find {background-color: transparent; float: right; color: white; padding: 14px 16px; display: block; margin: 0px; /*position: relative; bottom: 12px;*/}
.Navigation2 p#find input{padding: 3px; border: 1px solid blue; /*position: relative; bottom: 2px;*/ border-radius: 7px;}

＆＃13;

<div class="Navigation2">
    <div class="dropdown">
    <a class="Home" href="NewFile.html">TUTORIALS</a>
    <div class="dropdown-content">
    <a>HTML</a><br>
    <a>CSS</a><br>
    <a>Javascript</a><br>
    <a>JQuery</a><br>
    <a>Bootstrap</a><br>
    </div>
    </div>
    <a href="#">REFERENCES</a>
    <a href="#">EXAMPLES</a>
    <p id="find">Find: <input type="search" autofocus></p>
    <a href = "https://www.facebook.com/" id="MyFacebook"> MY FACEBOOK PAGE </a>
  </div>

＆＃13;

显示flex未按预期工作

3 个答案: