CSS - 制作了一个导航栏，但它超出了部分
CSS - making a navigation bar but it goes out section
我正在 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>
您必须将图片的最大宽度设置为 100%。
header image{
max-width: 100%;
}
在 ul
中的两个 image 上使用 display:inline-block;
我将您链接的背景颜色更改为红色，以便在此示例中可见。我还添加了 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>
您也可以为此使用 flexbox。
将 display: flex 添加到页眉容器，这样里面的所有项目都会排成一行。此外，您还可以将相同的方法应用于列表。只需将 display: flex 添加到 ul 元素并设置 align-items: center，这将使您的项目垂直居中。 flex-wrap: wrap 确保您的项目在一行中没有足够的 space 时换行。要将导航项推到右侧，只需将 margin-left: auto 添加到 ul 元素
最后，我还在 header 元素中添加了 width: 100%（而不是 auto）。
查看下面的代码片段
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>
我正在 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>
您必须将图片的最大宽度设置为 100%。
header image{
max-width: 100%;
}
在 ul
image 上使用 display:inline-block;
我将您链接的背景颜色更改为红色，以便在此示例中可见。我还添加了 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>
您也可以为此使用 flexbox。
将 display: flex 添加到页眉容器，这样里面的所有项目都会排成一行。此外，您还可以将相同的方法应用于列表。只需将 display: flex 添加到 ul 元素并设置 align-items: center，这将使您的项目垂直居中。 flex-wrap: wrap 确保您的项目在一行中没有足够的 space 时换行。要将导航项推到右侧，只需将 margin-left: auto 添加到 ul 元素
最后，我还在 header 元素中添加了 width: 100%（而不是 auto）。
查看下面的代码片段
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>