首頁猿問 Flexbox 不占用全寬

Flexbox 不占用全寬

Html5

慕的地8271018 2023-09-25 16:08:08

我正在嘗試使用 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

反對回復 2023-09-25

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>

</head>

<body>

<a href="#">Productos</a>

<a href="#">Servicios</a>

<a href="#">Contacto</a>

</nav>

</div>

</body>

</html>

反對回復 2023-09-25

千萬里不及你

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>

<a href="#">Productos</a>

<a href="#">Servicios</a>

<a href="#">Contacto</a>

</nav>

</div>

</body>

反對回復 2023-09-25

人到中年有點甜

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>

<a href="#">Productos</a>

<a href="#">Servicios</a>

<a href="#">Contacto</a>

</nav>

</div>

</body>

反對回復 2023-09-25

慕村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;

}

<a href="#">Productos<a>

<a href="#">Servicios<a>

<a href="#">Contacto<a>

</nav>

</div>

反對回復 2023-09-25

5 回答
0 關注
158 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Flexbox 不占用全寬

Flexbox 不占用全寬

5 回答

添加回答