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

Question

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

它应该是这样的：

Home Resume Contact Me

不知何故它总是这样结束：

Home Resume

Contact Me

你们能帮我看看吗？这是我的第一个网站。谢谢！

这是我的代码：

HTML

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;
}

<!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>

Answer 1

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

#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中的字体大小减小到40px。它应该将它们排成一行。

希望对您有所帮助！

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

Aligning text in a nav bar in HTML/CSS?

html

css

web