Question

小提琴：http://jsfiddle.net/Slayerk96/384vy/

我的标题非常古怪且不专业。我一直在玩这个标题，我似乎无法做到正确。当前标题:(家和我姓名之间的通知行）

Name(underlined) Home_blog_contact

我曾尝试使用css定位这些项目，但css不会正确调整它。

我想让它看起来像：

Name(bold and big no underline) Home Blog Contact(on same line)

当前的css

.nav {
  background-color: #000000;
  color: #CCCCCC;
  font-style: italic;
  font-size: 30px;
  border-color: 000000;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
}

.Menu
{
 display: inline-block;
    float: right;
    text-decoration: none;
    width: 40%;
}
.Menu li{
  display: inline;
  background-color: #000000;
}

.Menu li a{
  color: #CCCCCC;
  font-style: italic;
  font-size: 20px;
  text-decoration: none;
}

.Name {
  float: left;
}

.Menu li a:hover {
  color: #FFFFFF;
}

当前的html：

<!DOCTYPE html>
<html>
  <head>
    <Title>Name</Title>
    <link rel="stylesheet" href="My Site Template.css">
    <script src="Page on googleapis.com"></script>
    <script src="styling my site.js"></script>
  </head>
  <body>
   <div class='nav'>
 <ul class='Menu'>
        <li><a href='#'><span>Home</span></li>
        <li><a href='#'><span>Blog</span></li>
        <li><a href='#'><span>Contact</span></li>
      </ul>     
 <h1 class='Name'>Name</h1>
    </div>

Answer 1

正如Roko C. Buljan正确指出的那样，您忘了关闭锚标记：

http://jsfiddle.net/LimitedWard/9xh5L/

<div class='nav'>
    <ul class='Menu'>
        <li><a href='#'><span>Home</span></a></li>
        <li><a href='#'><span>Blog</span></a></li>
        <li><a href='#'><span>Contact</span></a></li>
    </ul>     
    <h1 class='Name'>Name</h1>
</div>

一个好的文本编辑器（如Sublime Text）可以通过语法高亮和自动完成帮助解决这个问题。

编辑：您还可以将padding-top添加到.menu中，使其与.Name垂直对齐。

网站标题问题

1 个答案: