Question

好的，显然我做错了什么。基本上我试图在页面顶部，图片右侧创建一个垂直导航栏。

它应该是这样的：

首页简历与我联系

不知怎的，它总是这样结束：

家庭简历

与我联系

你们可以看看并帮助我吗？这是我的第一个网站。谢谢！

这是我的代码：

HTML

＆＃13;

html {
  background-color: #ffffff;
}
img {
  width: 20%;
  float: left;
}
#menu {
  width: 550px;
  height: 35px;
  font-size: 55px;
  font-family: Courier, Serif;
  text-align: center;
  float: right;
  margin-right: 300px;
  margin-top: 50px;
}
#menu ul {
  height: auto;
}
#menu li {
  display: inline;
}
#menu a {
  text-decoration: none;
  color: #000000;
}
#menu a:hover {
  color: #224466;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
  <title>Tyler Tilton</title>
</head>
<body>
     <div id="menu">
    <ul>
      <li><a href="index.html">Home</a>
      </li>
      <li><a href="aboutus.html">Bio</a>
      </li>
      <li><a href="contactus.html">Contact Me</a>
      </li>
    </ul>
  </div>
  <img src="C:\Users\Tyler\Desktop\Personal Website\Images\Profile Pic.png" />
</body>

</html>

＆＃13;

Answer 1

你的代码有点乱。问题主要在于您的#menu课程。你的宽度太小，你的文字太大，你有不必要的边距和浮动添加。删除所有内容或调整它，您的列表将水平对齐：

#menu {
  /*width: 550px;*/ //too small for text size
  height: 35px;
  /*font-size: 55px;*/ //to big for width size
  font-family: Courier, Serif;
  text-align: center;
  /*float: right;*/ //not necessary, at least in your demo, pushing text off screen
  /*margin-right: 300px;*/ //not necessary, at least in your demo
}

FIDDLE

Answer 2

我认为 #menu 中的字体大小。
尝试在#menu中将font-size缩小为40px。它应该把它们放在一行。

希望它有所帮助！

在HTML / CSS中导航栏中对齐文本？

2 个答案: