尝试使用flex box将链接带到导航栏右侧[重复]
我正在尝试得到链接到页面的右侧和徽标留在左侧使用flex Box。我在.main-nav上尝试了justify-content：flex-end；，但什么也没有发生。
null
* {
box-sizing: border-box;
}
.header {
display: flex;
width: 100%;
background: green;
}
.main-nav {
display: flex;
}
.main-nav li {
text-align: right;
}<header class="header">
<h1 class="logo"><a href="#">Flexbox</a></h1>
<ul class="main-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>null
共有2个答案
null
* {
box-sizing: border-box;
}
.header {
width: 100%;
background: green;
}
.main-nav {
display: flex;
justify-content:flex-end;
}
.main-nav li {
text-align: right;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<!-- <script src="main.js"></script> -->
</head>
<body>
<header class="header">
<h1 class="logo"><a href="#">Flexbox</a></h1>
<ul class="main-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>
</body>
</html>
给出
-
元素(
.main-nav):
margin-left: auto;
-
ap.hideOptionButton() 隐藏导航栏右侧按钮。 代码示例 <script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.inc.min.js"></script> <button class="btn btn-default">显示多个按钮</button> <button
-
ap.showOptionButton() 显示导航栏右侧按钮。 代码示例 <script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.inc.min.js"></script> <button class="btn btn-default">显示 optionButton</button
-
ap.setOptionButton(OPTION | items, CALLBACK) 设置导航栏右侧按钮。 OPTION 参数说明 名称 类型 必填 描述 onClick Function 否 监听 optionButton 点击事件 reset Boolean 否 重置到系统默认按钮，默认为 false。当为 true 时，忽略其他参数 preventDefault Boolean 否 是否
-
我已经设置了一个左右两侧的导航抽屉。除了一件事，一切都很好。 我希望我的另一个动作栏项目切换右边的抽屉菜单。正常的左边动作栏切换效果很好。谷歌Android应用程序通知面板是我希望动作模仿的。 下面是我用来设置右侧切换的代码（现在它在单击时强制关闭）： 如果有人知道怎么做，如果你能让我知道就太好了！ 谢谢
-
导航和侧边栏 引用网站文档 如果你想在 docs 文件夹中引用另一个文档（或者你通过可选 customDocsPath路径站点配置选项设置的位置），那么你只需要使用你想引用的文档名称。 例如，如果你在 doc2.md 中，而你想引用 doc1.md： 这里引用了一个 [文档](doc1.md). Docusaurus 目前不支持嵌套文件夹中的文件; 只能是在一个平面文件结构中。 我们正在考虑添加
-
我遇到的一个问题是水平导航栏。我已经使用flexbox实现了它。 我有一个导航条，当我缩小它时，列表项（有黑色边框）不会停留在无序列表容器中（有紫色边框） 根据我对每个flex box的理解，应该使用flex属性在父容器中调整大小。但是在我的例子中，列表项不会在无序列表容器中调整大小。以下是正在发生的事情的图片： 这是我的html代码：