Question

问题

我仔细查看了代码，无法看到为什么标题nav float在样式表中不起作用的原因。我在下面包含了所有的html代码和css代码。我想移动我的标题导航到我的css代码右侧，以便我的链接水平显示在我的主页的右上角。

body {
    font: 15px/1.5 Arial, Helvetica, sans-serif;
    padding: 0;
    margin: 0;
    background-color: #f4f4f4;
}

/*Global*/
.container {
    width: 80%;
    margin: auto;
    overflow: hidden;
}

ul {
    margin: 0;
    padding: 0;
 }

/* header */

header {
    background: #35424a;
    color: #fff;
    padding-top: 30px;
    min-height: 70px;
    border-bottom: #000 3px solid;
}

header a {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
}


header li {
    float: left;
    display: inline;
    padding: 0 20px 0 20px;
}

header #branding {
    float: left;
}

header #branding h1 {
    margin: 0;
}

header nav {
    float: right;
    margin-top: 10px;
}

header .highlight, header .current a {
    color: #e8491d;
    font-weight: bold;
}

header a:hover {
    color: #ccc;
    font-weight: bold;
}

/* Home Section */

#home {
    min-height: 400px;
    background: url("http://www.ridgedesign.ie/wp-content/uploads/2011/02/Ridge-Design-Website-Design-Background.jpg") 0 400px;
    background-size: cover;
    text-align: center;
    color: #fff;
}

#home h1 {
    margin-top: 100px;
    font-size: 55px;
    margin-bottom: 10px;
}

#home p {
    font-size: 20px;

<!DOCTYPE>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Home</title>
  <body>
  <header>
    <div class="container">
      <div id="branding"><span class="highlight"><h1>James 
Velardi</span></h1>
        <nav>
          <ul>
            <li class="current"><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="services.html">Services</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </header>
  <section id="home">
    <div class="container">
      <h1>Affordable Professional Web Design</h1>
      <p>laskfj;jla;jal;j;aljs;lasj;lasjl;ajsdlajsdl;fajsldfkjals;dfjalsdkfjalsf</p>
    </div>
  </section>

Answer 1

我将NSClassFromString添加到导航无序列表，并使用class="nav"选择器将位置设置为绝对。

.nav

您可以通过调整顶部和右侧值来更改位置。

.nav {
  position:absolute;
  top: 20px;
  right:0px;
}

body {
    font: 15px/1.5 Arial, Helvetica, sans-serif;
    padding: 0;
    margin: 0;
    background-color: #f4f4f4;
}

/*Global*/
.container {
    width: 80%;
    margin: auto;
    overflow: hidden;
}

ul {
    margin: 0;
    padding: 0;
 }

/* header */

header {
    background: #35424a;
    color: #fff;
    padding-top: 30px;
    min-height: 70px;
    border-bottom: #000 3px solid;
}

header a {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
}

.nav {
  position:absolute;
  top: 20px;
  right:0px;
}

header li {
    float: left;
    display: inline;
    padding: 0 20px 0 20px;
}

header #branding {
    float: left;
}

header #branding h1 {
    margin: 0;
}

header nav {
    float: right;
    margin-top: 10px;
}

header .highlight, header .current a {
    color: #e8491d;
    font-weight: bold;
}

header a:hover {
    color: #ccc;
    font-weight: bold;
}

/* Home Section */

#home {
    min-height: 400px;
    background: url("http://www.ridgedesign.ie/wp-content/uploads/2011/02/Ridge-Design-Website-Design-Background.jpg") 0 400px;
    background-size: cover;
    text-align: center;
    color: #fff;
}

#home h1 {
    margin-top: 100px;
    font-size: 55px;
    margin-bottom: 10px;
}

#home p {
    font-size: 20px;
    }

Answer 2

我认为你的#branding div左侧是破坏它 - 并且似乎没有必要，因为你想要左对齐。

它对我有用：

#branding {
    float: none
}

此外 - 在您的HTML中，您需要在。突出显示范围

之前移动您的浮动。导航 div

Answer 3

如果您在浏览器检查器中查看页面，则有两个问题变得非常明显：

第一个是您已经浮动了品牌div，浮动元素会将其从常规流中移除，并且它不再是全宽，因此内部的导航将放在标题下方。
您混合了<h1>和<span class="highlight">的开始和结束标记，这导致块<h1>在内联内 <span>，至少在Firefox中。

在Firefox检查器中比较您的示例的屏幕截图：

使用另一个经过调整的代码：

请记住，浏览器检查员是您的朋友。

＆＃13;

body {
    font: 15px/1.5 Arial, Helvetica, sans-serif;
    padding: 0;
    margin: 0;
    background-color: #f4f4f4;
}

/*Global*/
.container {
    width: 80%;
    margin: auto;
    overflow: hidden;
}

ul {
    margin: 0;
    padding: 0;
 }

/* header */

header {
    background: #35424a;
    color: #fff;
    padding-top: 30px;
    min-height: 70px;
    border-bottom: #000 3px solid;
}

header a {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
}


header li {
    float: left;
    display: inline;
    padding: 0 20px 0 20px;
}

header #branding {
    /*float: left;*/
}

header #branding h1 {
    margin: 0;
}

header nav {
    float: right;
    margin-top: 10px;
}

header .highlight, header .current a {
    color: #e8491d;
    font-weight: bold;
}

header a:hover {
    color: #ccc;
    font-weight: bold;
}

/* Home Section */

#home {
    min-height: 400px;
    background: url("http://www.ridgedesign.ie/wp-content/uploads/2011/02/Ridge-Design-Website-Design-Background.jpg") 0 400px;
    background-size: cover;
    text-align: center;
    color: #fff;
}

#home h1 {
    margin-top: 100px;
    font-size: 55px;
    margin-bottom: 10px;
}

#home p {
    font-size: 20px;

＆＃13;

<!DOCTYPE>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Home</title>
  <body>
  <header>
    <div class="container">
      <div id="branding"><h1><span class="highlight">James 
Velardi</span></h1>
        <nav>
          <ul>
            <li class="current"><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="services.html">Services</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </header>
  <section id="home">
    <div class="container">
      <h1>Affordable Professional Web Design</h1>
      <p>laskfj;jla;jal;j;aljs;lasj;lasjl;ajsdlajsdl;fajsldfkjals;dfjalsdkfjalsf</p>
    </div>
  </section>

＆＃13;

如何将标题导航标记向右浮动？

3 个答案: