javascript - CSS - 制作导航栏但它超出了部分

Question

我正在 FreeCodeCamp 上学习编码，并尝试编写我的第一个作品集网站。

我试图使用以下语法在“header”部分内的图像旁边创建一个导航栏，但它超出了“header”部分。

请帮忙看看我哪里做错了？表示赞赏。

  body{
      font-family: 'slabo 27px', Times new roman;
      background-color: #F2F2F2;
    }
    header{
      background-color: #010101;
      width: auto;
    }
    ul{
      list-style-type: none;
    }
    li{
      float: right;
    }
    a{
      display: block;
      padding: 8px;
      background-color: #010101;
    }





   

    <link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet">

    <header>
        <img src="https://lh3.googleusercontent.com/HilrPscVgt8SwodMthwXOsQWOmSbqFSbbM4rKSGnZa4WaMrrtIYfgbkWjNV6LwNjUgAX7GkI0jVcSTrR_Q4I9MZA_ymPje03V-npXDTIn7vr69BdU2Mh9zxFm8_egBTcVTg3_HZAqAk16CCFQExvZKENnmZQEsmrHeuigotSsLw8U24enecE5IM-ywRSg47qDiffMOnTUpywOIMv-asVgmjgGn9aXUL27SEQStkZ2RBY-cGGLDm8FP6IUEKrfizee-zN2O2xs3Y8UKZ-GbhyGYZuIOV_DRX7vXozvwfhN_IgQ0mKzrM0pAR-OxVJRLnJzZTSJhUyC6aayyxvX-UEdWt7o7pk_WkzgWleswlNLXw_KHrzR-Cf7yReZSnF1AOxTrn4V53Mgdp1m_yX9IvAAFqnMCBkUwMwvBppn7Sda6l3eN3nnRgS5Dw6NuYXCFilhpkZnDn_avB-Kz9jM5VFtbOs7z6rSWDqHIn9caHHX564ergfdlRHbHGRuXjX6Ey2kejbkhpnzmp0-N4dbX_DXC1yt1ZZY0r0gayFTAgk95acLpcJxb740iAvBbx2s7SzUi1C83gPMNMo4Vd-saG57syQMvT0rNwXIwcSPxH4Tcb7iW9iRWOueA=w542-h963-no", alt="my booooy" width="50px" style="margin-left: 50px">
        <ul>
          <li><a>ABOUT</a></li>
          <li><a>PORTFOLIO</a></li>
          <li><a>CONTACT</a></li>
        </ul>
    </header>
    <div id="description">
      <div class="row">
        <div class="col-md-8">Front-End Developer and UX/UI designer, with practical experience in project management, branding strategy, and creative direction; devoted to functional programming and information architecture.</div>
      <div></div>
      <div class="col-md-8">Web Developer - User Experience Designer - Graphic Artist</div>
      <img src="https://lh3.googleusercontent.com/HilrPscVgt8SwodMthwXOsQWOmSbqFSbbM4rKSGnZa4WaMrrtIYfgbkWjNV6LwNjUgAX7GkI0jVcSTrR_Q4I9MZA_ymPje03V-npXDTIn7vr69BdU2Mh9zxFm8_egBTcVTg3_HZAqAk16CCFQExvZKENnmZQEsmrHeuigotSsLw8U24enecE5IM-ywRSg47qDiffMOnTUpywOIMv-asVgmjgGn9aXUL27SEQStkZ2RBY-cGGLDm8FP6IUEKrfizee-zN2O2xs3Y8UKZ-GbhyGYZuIOV_DRX7vXozvwfhN_IgQ0mKzrM0pAR-OxVJRLnJzZTSJhUyC6aayyxvX-UEdWt7o7pk_WkzgWleswlNLXw_KHrzR-Cf7yReZSnF1AOxTrn4V53Mgdp1m_yX9IvAAFqnMCBkUwMwvBppn7Sda6l3eN3nnRgS5Dw6NuYXCFilhpkZnDn_avB-Kz9jM5VFtbOs7z6rSWDqHIn9caHHX564ergfdlRHbHGRuXjX6Ey2kejbkhpnzmp0-N4dbX_DXC1yt1ZZY0r0gayFTAgk95acLpcJxb740iAvBbx2s7SzUi1C83gPMNMo4Vd-saG57syQMvT0rNwXIwcSPxH4Tcb7iW9iRWOueA=w542-h963-no" class="col-md-4" width="50px" style="margin-left:10%">
    </div>
    <div class="portfolio">
      <img src="">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="contactme">
      <div></div>
      <img src="">
      <div>
        <form action="/submit contact data"><input type="text" placeholder="Name" required>
          <input type="text" placeholder="Email address" required>
          <input type="text" placeholder="Phone Number" required>
          <input type="text" placeholder="Message" required>
          <button type="submit">Send</button>
        </form>
      </div>
      <div>
        Want to get in touch with me? Be it to request more info about myself or my experience, to ask for my resume, tips on how to solve your sudoku, random questions about the universe and the meaning of life, or even if only for some nice Fika here in stunning Toronto... just feel free to drop me a line anytime.
    I promise to reply A.S.A.P.
      </div>
      <div class="bottomline">
        <div></div>
        <div></div>
      </div>
      <div class="lastline" align="center">
        <p>Chun Hong © 2016. All Rights Reversed</p>
      </div>

Answer 1

在 ul 中的两个 image 上使用 display:inline-block;

在这个例子中，我将链接的背景颜色更改为红色以提高可见性。我还在你的 ul 中添加了 float:right;。这不是必需的，只是为了让它看起来不错。

body{
 font-family: 'slabo 27px', Times new roman;
 background-color: #F2F2F2;
}
header{
 background-color: #010101;
 width: auto;
}
header img{
 display:inline-block;
}
ul{
 list-style-type: none;
 display:inline-block;
 float:right;
}
li{
 float: right;
}
a{
 display: block;
 padding: 8px;
 color:white;
 background-color: red;
}

<link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet">

    <header>
        <img src="https://lh3.googleusercontent.com/HilrPscVgt8SwodMthwXOsQWOmSbqFSbbM4rKSGnZa4WaMrrtIYfgbkWjNV6LwNjUgAX7GkI0jVcSTrR_Q4I9MZA_ymPje03V-npXDTIn7vr69BdU2Mh9zxFm8_egBTcVTg3_HZAqAk16CCFQExvZKENnmZQEsmrHeuigotSsLw8U24enecE5IM-ywRSg47qDiffMOnTUpywOIMv-asVgmjgGn9aXUL27SEQStkZ2RBY-cGGLDm8FP6IUEKrfizee-zN2O2xs3Y8UKZ-GbhyGYZuIOV_DRX7vXozvwfhN_IgQ0mKzrM0pAR-OxVJRLnJzZTSJhUyC6aayyxvX-UEdWt7o7pk_WkzgWleswlNLXw_KHrzR-Cf7yReZSnF1AOxTrn4V53Mgdp1m_yX9IvAAFqnMCBkUwMwvBppn7Sda6l3eN3nnRgS5Dw6NuYXCFilhpkZnDn_avB-Kz9jM5VFtbOs7z6rSWDqHIn9caHHX564ergfdlRHbHGRuXjX6Ey2kejbkhpnzmp0-N4dbX_DXC1yt1ZZY0r0gayFTAgk95acLpcJxb740iAvBbx2s7SzUi1C83gPMNMo4Vd-saG57syQMvT0rNwXIwcSPxH4Tcb7iW9iRWOueA=w542-h963-no", alt="my booooy" width="50px" style="margin-left: 50px">
        <ul>
          <li><a>ABOUT</a></li>
          <li><a>PORTFOLIO</a></li>
          <li><a>CONTACT</a></li>
        </ul>
    </header>
    <div id="description">
      <div class="row">
        <div class="col-md-8">Front-End Developer and UX/UI designer, with practical experience in project management, branding strategy, and creative direction; devoted to functional programming and information architecture.</div>
      <div></div>
      <div class="col-md-8">Web Developer - User Experience Designer - Graphic Artist</div>
      <img src="https://lh3.googleusercontent.com/HilrPscVgt8SwodMthwXOsQWOmSbqFSbbM4rKSGnZa4WaMrrtIYfgbkWjNV6LwNjUgAX7GkI0jVcSTrR_Q4I9MZA_ymPje03V-npXDTIn7vr69BdU2Mh9zxFm8_egBTcVTg3_HZAqAk16CCFQExvZKENnmZQEsmrHeuigotSsLw8U24enecE5IM-ywRSg47qDiffMOnTUpywOIMv-asVgmjgGn9aXUL27SEQStkZ2RBY-cGGLDm8FP6IUEKrfizee-zN2O2xs3Y8UKZ-GbhyGYZuIOV_DRX7vXozvwfhN_IgQ0mKzrM0pAR-OxVJRLnJzZTSJhUyC6aayyxvX-UEdWt7o7pk_WkzgWleswlNLXw_KHrzR-Cf7yReZSnF1AOxTrn4V53Mgdp1m_yX9IvAAFqnMCBkUwMwvBppn7Sda6l3eN3nnRgS5Dw6NuYXCFilhpkZnDn_avB-Kz9jM5VFtbOs7z6rSWDqHIn9caHHX564ergfdlRHbHGRuXjX6Ey2kejbkhpnzmp0-N4dbX_DXC1yt1ZZY0r0gayFTAgk95acLpcJxb740iAvBbx2s7SzUi1C83gPMNMo4Vd-saG57syQMvT0rNwXIwcSPxH4Tcb7iW9iRWOueA=w542-h963-no" class="col-md-4" width="50px" style="margin-left:10%">
    </div>
    <div class="portfolio">
      <img src="">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="contactme">
      <div></div>
      <img src="">
      <div>
        <form action="/submit contact data"><input type="text" placeholder="Name" required>
          <input type="text" placeholder="Email address" required>
          <input type="text" placeholder="Phone Number" required>
          <input type="text" placeholder="Message" required>
          <button type="submit">Send</button>
        </form>
      </div>
      <div>
        Want to get in touch with me? Be it to request more info about myself or my experience, to ask for my resume, tips on how to solve your sudoku, random questions about the universe and the meaning of life, or even if only for some nice Fika here in stunning Toronto... just feel free to drop me a line anytime.
    I promise to reply A.S.A.P.
      </div>
      <div class="bottomline">
        <div></div>
        <div></div>
      </div>
      <div class="lastline" align="center">
        <p>Chun Hong © 2016. All Rights Reversed</p>
      </div>