CSS - 制作一个导航栏，但它出去了

时间：2016-12-29 08:02:11

标签： javascript html css css-float

我正在学习FreeCodeCamp的编码并尝试编写我的第一个投资组合网站。

我试图在＆＃34;标题＆＃34;内的图像旁边创建一个导航栏。具有以下语法的部分，但它超出了＆＃34; header＆＃34;部分。

请帮忙检查我哪里做错了？赞赏。

＆＃13;
＆＃13; 
  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;
    }
＆＃13; 
    <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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：2)

在display:inline-block;

中的image上使用ul

在此示例中，我将链接的背景颜色更改为红色以显示可见性。我还在float:right;添加了ul。它没有必要，只是为了让它看起来很好。

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>

答案 1 :(得分：0)

您必须将图像的最大宽度设置为100％。

header image{
   max-width: 100%;
}

答案 2 :(得分：0)

您也可以使用flexbox。

将display: flex添加到标题容器中，以便内部的所有项目都会对齐。此外，您还可以对列表应用相同的方法。只需将display: flex添加到ul元素，然后设置align-items: center即可垂直居中。如果在一行中没有足够的空间，flex-wrap: wrap可确保您的项目将换行。要将导航项目推向右侧，只需将margin-left: auto添加到ul元素

即可

最后，我还在width: 100%元素中添加了auto（而不是header）。

查看下面的代码段

body{
  font-family: 'slabo 27px', Times new roman;
  background-color: #F2F2F2;
}
header{
  background-color: #010101;
  width: 100%;
  display: flex;
  height: auto;
  align-content: center;
  flex-wrap: wrap;
}
header > img {
  height: 80px;
}
ul{
  list-style-type: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-left: auto;
}
a{
  display: block;
  padding: 8px;
  background-color: #010101;
  color: #FFF;
}
<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>

相关问题
最新问题