我正在尝试使用 Flexbox 制作一个顶部栏，我希望在网站的左上角有一个图标，在右侧有一个导航。所以我在CSS中这样写：.barra { display: flex; justify-content: space-between; padding-top: 30px; font-size: 30px;}.barra a { text-decoration: none; color: black;}但酒吧只占了一半的宽度。HTML 看起来像这样<body> <div class=barra> <i class="fas fa-wifi"></i> <nav class=navegacion> <a href="#">Productos<a> <a href="#">Servicios<a> <a href="#">Contacto<a> </nav> </div></body>我尝试在 .barra 中使用“Width: 100%;”，但它没有做任何事情我不知道这里出了什么问题，我希望得到一些帮助。我正在使用 ruby on Rails 来制作该网站。
5 回答
手掌心
TA贡献1942条经验 获得超3个赞
您缺少锚点的结束标签。
<a>...</a>
新标记：
<div class=barra> <i class="fas fa-wifi"></i> <nav class=navegacion> <a href="#">Productos</a> <a href="#">Servicios</a> <a href="#">Contacto</a> </nav></div>
https://codepen.io/koralarts/pen/wvaxERr
PIPIONE
TA贡献1829条经验 获得超9个赞
我已经修改了类名。请使用与其语义相关的正确名称。
代码中有一些错误
1.你忘记引用类名
<nav class=navegacion>
您忘记正确关闭标签。
修改代码
.header {
display: flex;
justify-content: space-between;
padding-top: 20px;
font-size: 30px;
background-color: black;
color: whitesmoke;
}
.navigation a {
text-decoration: none;
color: whitesmoke;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>repl.it</title>
</head>
<body>
<div class="header">
<i class="fas fa-wifi">icon</i>
<nav class="navigation">
<a href="#">Productos</a>
<a href="#">Servicios</a>
<a href="#">Contacto</a>
</nav>
</div>
</body>
</html>
千万里不及你
TA贡献1784条经验 获得超9个赞
删除你的错别字。您没有关闭任何锚标记，而只是创建broken HTML.
.barra {
display: flex;
justify-content: space-between;
padding-top: 30px;
font-size: 30px;
background: yellow;
}
.barra a {
text-decoration: none;
color: black;
}
i {
display: block;
}
nav {
background: red;
display:block;
}
<body>
<div class=barra>
<i class="fas fa-wifi">i</i>
<nav class=navegacion>
<a href="#">Productos</a>
<a href="#">Servicios</a>
<a href="#">Contacto</a>
</nav>
</div>
</body>
人到中年有点甜
TA贡献1895条经验 获得超7个赞
不确定我是否正确回答了您的问题，但这可能就是您正在寻找的，我在 和 上添加了柔性显示<nav>，<i>图标标签不可见，因为您没有包含 font-awesome 样式。
.barra {
display: flex;
flex-direction: row;
justify-content: space-between;
padding-top: 30px;
font-size: 30px;
}
.barra nav {
text-decoration: none;
flex: 4;
border: 1px solid;
width: 95%;
}
.barra i {
flex: 1;
border: 1px solid;
}
<body>
<div class="barra">
<i class="fa fa-wifi"></i>
<nav class="navegacion">
<a href="#">Productos</a>
<a href="#">Servicios</a>
<a href="#">Contacto</a>
</nav>
</div>
</body>
慕村225694
TA贡献1880条经验 获得超4个赞
您的示例实际上确实采用了全宽：
使用border: 1px solid red是调试这些东西的好方法。
您也许还有其他适用的风格吗.barra？
.barra {
display: flex;
justify-content: space-between;
padding-top: 30px;
font-size: 30px;
border: 1px solid red;
}
.barra a {
text-decoration: none;
color: black;
}
<div class=barra>
<i class="fas fa-wifi"></i>
<nav class=navegacion>
<a href="#">Productos<a>
<a href="#">Servicios<a>
<a href="#">Contacto<a>
</nav>
</div>
- 5 回答
- 0 关注
- 68 浏览
添加回答
举报
0/150
提交
取消