Flexbox 不占用全宽
我正在尝试使用 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 来制作该网站。
慕的地8271018浏览 105回答 5
5回答
-
手掌心
您缺少锚点的结束标签。<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
我已经修改了类名。请使用与其语义相关的正确名称。代码中有一些错误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> -
千万里不及你
删除你的错别字。您没有关闭任何锚标记，而只是创建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> -
人到中年有点甜
不确定我是否正确回答了您的问题，但这可能就是您正在寻找的，我在 和 上添加了柔性显示<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
您的示例实际上确实采用了全宽：使用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>
随时随地看视频慕课网APP
相关分类
Html5