CSS - 制作导航栏，但它出去部分

我正在学习编码FreeCodeCamp并尝试编写我的第一个投资组合网站。CSS - 制作导航栏，但它出去部分

我试图用下面的语法在“标题”部分内部的图像旁边创建一个导航栏，但它不在“标题”部分。

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

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>

来源

2016-12-29 Chun Hong Huang

使用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>

来源

2016-12-29 08:06:52 ab29007

@周春红如果能解决您的问题，请接受我的回答。你知道点击我答案左边的复选标记。 – ab29007

感谢您的回答，这是我想要的效果。但我不知道为什么以及如何产生效果。你能否告诉我在哪里可以找到CSS语法效果的指令？谢谢。 –

这是因为'ul'元素发生的，因为它正在全宽并且不适合图像。当我添加'display：inline-block;'时它就消失了。现在我不能在这里详细说明'display'属性，因为它太宽泛了。但是这里有一篇很好的文章解释了它的基础知识：https://css-tricks.com/almanac/properties/d/display/ – ab29007

您必须设置最大宽度图像以100％。

header image{ 
    max-width: 100%; 
}

来源

2016-12-29 08:06:45

THX，但它不是我想要的效果。 –

您也可以使用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>

来源

2016-12-29 08:18:59

谢谢@Ramis Wachtler，你的回答相当好。我会记下它，并不断学习这些基础知识。 –

CSS - 制作导航栏，但它出去部分

回答

相关问题