第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

Flexbox 不占用全寬

Flexbox 不占用全寬

慕的地8271018 2023-09-25 16:08:08
我正在嘗試使用 Flexbox 制作一個(gè)頂部欄，我希望在網(wǎng)站的左上角有一個(gè)圖標(biāo)，在右側(cè)有一個(gè)導(dǎo)航。所以我在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 來制作該網(wǎng)站。
查看完整描述

5 回答

?
手掌心

TA貢獻(xiàn)1942條經(jīng)驗(yàn) 獲得超3個(gè)贊

您缺少錨點(diǎn)的結(jié)束標(biāo)簽。

<a>...</a>

新標(biāo)記：

<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


查看完整回答
反對(duì) 回復(fù) 2023-09-25
?
PIPIONE

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超9個(gè)贊

我已經(jīng)修改了類名。請(qǐng)使用與其語(yǔ)義相關(guān)的正確名稱。

代碼中有一些錯(cuò)誤

1.你忘記引用類名

<nav class=navegacion>

  1. 您忘記正確關(guān)閉標(biāo)簽。

修改代碼

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


查看完整回答
反對(duì) 回復(fù) 2023-09-25
?
千萬(wàn)里不及你

TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超9個(gè)贊

刪除你的錯(cuò)別字。您沒有關(guān)閉任何錨標(biāo)記，而只是創(chuàng)建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>


查看完整回答
反對(duì) 回復(fù) 2023-09-25
?
人到中年有點(diǎn)甜

TA貢獻(xiàn)1895條經(jīng)驗(yàn) 獲得超7個(gè)贊

不確定我是否正確回答了您的問題，但這可能就是您正在尋找的，我在 和 上添加了柔性顯示<nav>，<i>圖標(biāo)標(biāo)簽不可見，因?yàn)槟鷽]有包含 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>


查看完整回答
反對(duì) 回復(fù) 2023-09-25
?
慕村225694

TA貢獻(xiàn)1880條經(jīng)驗(yàn) 獲得超4個(gè)贊

您的示例實(shí)際上確實(shí)采用了全寬：


使用border: 1px solid red是調(diào)試這些東西的好方法。


您也許還有其他適用的風(fēng)格嗎.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>


查看完整回答
反對(duì) 回復(fù) 2023-09-25
  • 5 回答
  • 0 關(guān)注
  • 171 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)