文章/答案/技术大牛

发布

社区首页 >问答首页 >显示flex未按预期工作

问显示flex未按预期工作
EN

Stack Overflow用户

提问于 2018-04-13 03:07:46

回答 3查看 848关注 0票数 0

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

我已经张贴了我的超文本标记语言和CSS以及在<style>标签。希望有人知道怎么做？谢谢..

<!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>

html

css

flexbox

回答 3

Stack Overflow用户

发布于 2018-04-13 03:36:01

在您的Navigation2类中，添加

align-items: 'center'

这将在中间对齐子对象的垂直对齐方式。

票数 0

Stack Overflow用户

发布于 2018-04-13 03:44:01

为了达到预期的效果，将dropdown类设置为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>

票数 0

Stack Overflow用户

发布于 2018-04-13 03:48:40

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49804180

复制

相似问题

问显示flex未按预期工作
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问显示flex未按预期工作EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问显示flex未按预期工作
EN