Question

我一直在尝试创建自己的网站，并且几个小时以来一直在修改导航栏。我似乎无法让它看起来像这样：

Abdullahi Farah Home Blog Contact

目前的情况如下：

Abdullahi Farah                         
                                        contactBlogHome

我如何能够将我的名字和标签保持在相同的lin和相同的div中，具有相同的背景图像。而且也没有掩盖class='intro'

的一部分

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 li{
  display: inline;
  background-color: #000000;
  float:Right !important;
}

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

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


.intro {

}

HTML：

<!DOCTYPE html>
<html>
  <head>
    <Title>Abdullahi Farah</Title>
    <link rel="stylesheet" href="My Site Template.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="styling my site.js"></script>
  </head>

  <body>

    <div class='nav'>
      <h1 class='Name'>Abdullahi Farah</h1>
      <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>
    </div>

    <div class='Intro'>
      <img src="http://www.facets.la/fullview/F_2013_007_AZTEC.jpg">
      <img src="https://scontent-a.xx.fbcdn.net/hphotos-xfp1/t1.0-9/10155548_10201867486469738_7586118961374075182_n.jpg">
      <p>Programmer and Designer</p>
      <p>Twitter <a href="https://twitter.com/ThaAlumniGR">#ThaAlumniGR</a></p>
      <p>Linkedin <a href="http://www.linkedin.com/pub/abdullahi-farah/77/b19/ab3">#abdullahi-farah</a></p>
      <p>Github <a href="https://github.com/Abdullahif14688">#Abdullahif14688</a></p>
      <p>Stack Overflow <a href="http://stackoverflow.com/users/2890980/abdullahi-farah">#abdullahi-farah</a></p>
      <p>Coderbits <a href="https://coderbits.com/Abdullahif14688">#Abdullahif14688</a></p>
    </div>

    <div class='bio'>
      <h1 class='Welcome'>Welcome</h1>
      <h1>Bio</h1>
      <p>blah blah blah</p>
      <img src="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-xpa1/v/t1.0-9/247574_10150198699471099_3320663_n.jpg?oh=f1bd74bf2d5fdeb17ea7e778a66cf05b&oe=54409CEE&__gda__=1414378754_c42f1ccf18cdb4515fe7128488a85c4a">
      <h1>Projects</h1>
      <p>blah blah blah</p>
      <img src="http://sgaul.de/wp-content/uploads/2012/09/adobe-source-code-font.png">
      <h1>Products</h1>
      <p>blah blah blah</p>
      <img src="http://i1.birminghammail.co.uk/incoming/article361484.ece/alternates/s615/Apple-GooglePlay-LOGOS.jpg">
    </div>


  </body>

</html>

Answer 1

你只需要将你的h1标签向左浮动并在你的li之间添加一个边距：

h1 {
  float:left;
}

.Menu li{
  margin-right:20px;
}

Answer 2

将html更改为：

  <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'>Abdullahi Farah</h1>

    </div>

和css部分为：

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

它应该有效......：）

Answer 3

将css更改为：

.Menu {
    float: right;
}

.Menu li {
    display: inline-block;
    margin-left: 10px;
}

导航窗口问题

3 个答案: