导航链接中的错误，对于我的投资组合

Question

尝试制作我的作品集，以及网页设计新手。我正在尝试添加导航链接，但最后一个链接转到下一行。不知道为什么会这样吗？ 我想要单行，如果甚至有一些不同的方法来表示这个pl。帮助我/指导我。

谢谢！

My Demo

CSS＆amp; HTML

＆＃13;

＆＃13;

html,
body {
  margin: 0%;
  top: 0%;
}
body {
  background: #2f233d;
  overflow: hidden;
}
header {
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 12%;
  background: #333;
  font-family: Agenda Medium, Sans-Serif, Arial;
  font-size: 20px;
}
header img {
  display: inline;
  width: 227px;
  height: 100px;
  margin-left: 2%;
}
header .links {
  display: inline-block;
  position: absolute;
  bottom: 10%;
}
header a {
  border: 1px solid #ddd;
  padding: 1%;
  text-decoration: none;
  color: #ccc;
}
footer {
  position: fixed;
  bottom: 0%;
  left: 0%;
  width: 100%;
  height: 10%;
  background: #ccc;
}
aside {
  position: fixed;
  top: 12%;
  left: 0%;
  width: 20%;
  height: 78%;
  background: #f2f1f1;
  overflow-y: auto;
}
section {
  position: fixed;
  top: 12%;
  left: 20%;
  width: 82%;
  height: 78%;
  background: #fff;
  overflow-y: scroll;
}

＆＃13;

<header>
  <img src="Logo.png" alt="logo" />
  <span class="links">
	<a href="#home">Home</a>
	<a href="#about">About</a>
	<a href="#gallery">Gallery</a>
	<a href="#work">Work</a>
	<a href="#contact">Contact</a>
</span>

</header>
<footer></footer>
<aside></aside>
<section></section>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要定义宽度。目前宽度取决于单词的长度。

这是许多解决方案中的一个，这个解决方案很简单。

header img {
    width: 15%;
}
.links {
    width: 80%;
}

我刮了一下去考虑边距和填充。这里重要的是我用百分比而不是像素定义图像的宽度，我定义.links的宽度，而不仅仅是它的子元素。

诚实地说，您的解决方案需要更加复杂。它需要考虑移动设备，因为小屏幕会导致文字溢出边框。但是，这应该回答你当前的问题。

fiddle

Answer 2

对于header a和header .links更改CSS ..

<强>演示：

＆＃13;

＆＃13;

html,
body {
  margin: 0%;
  top: 0%;
}
body {
  background: #2f233d;
  overflow: hidden;
}
header {
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 12%;
  background: #333;
  font-family: Agenda Medium, Sans-Serif, Arial;
  font-size: 20px;
}
header img {
  display: inline;
  width: 227px;
  height: 100px;
  margin-left: 2%;
}
header .links {
  display: inline-block;
  position: absolute;
  bottom: 10%;
width:100%
}
header a {
  border: 1px solid #ddd;
  padding: 1%;
  text-decoration: none;
  color: #ccc;
display:inline-block
}
footer {
  position: fixed;
  bottom: 0%;
  left: 0%;
  width: 100%;
  height: 10%;
  background: #ccc;
}
aside {
  position: fixed;
  top: 12%;
  left: 0%;
  width: 20%;
  height: 78%;
  background: #f2f1f1;
  overflow-y: auto;
}
section {
  position: fixed;
  top: 12%;
  left: 20%;
  width: 82%;
  height: 78%;
  background: #fff;
  overflow-y: scroll;
}

＆＃13;

<header>
  <img src="Logo.png" alt="logo" />
  <span class="links">
	<a href="#home">Home</a>
	<a href="#about">About</a>
	<a href="#gallery">Gallery</a>
	<a href="#work">Work</a>
	<a href="#contact">Contact</a>
</span>

</header>
<footer></footer>
<aside></aside>
<section></section>

＆＃13;

＆＃13;

＆＃13;

Answer 3

只需更换标题.links类

header .links
{
    display:inline-block;
    position:absolute;
    bottom:10%;
    width:100%
}

它适用于你。