Question

HTML代码

<html>
<head>
    <title>Front-end Web Developer</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <header class = "main-header clearfix">
        <h1>Front-end Web Developer</h1>
        <nav class = "main-nav">
            <ul>
                <li><a href = "index.html">Home</a></li>
                <li><a href = "about.html">About</a></li>
                <li><a href = "portfolio.html">Portfolio</a></li>
                <li><a href = "contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

[CSS]代码

body {
    font-size: 32px;
    background-color: rgb(30, 89, 152);
    color: rgb(255, 255, 255);
    font-family: Bookman, Georgia, serif;
}

.main-header {
    border-style: solid;
    border: 4px 2px;
    border-color: rgb(255, 255, 255);
    display: inline-block;
    float: left;

}
h1 {
    font-size: 2em;
    margin: 0px 0px;
}

.main-nav {
    float: right;
}

.main-nav ul {
    list-style-type: none;
}

.main-nav ul li a {
    text-decoration: none;
}

.main-nav ul li {
        display: inline-block;
        margin: 0px 55px;
        font-size: .8em;
        padding: 14px 0px; 
}


a:link {
    color: rgb(255, 255, 255);
}

a:visited {
    color: rgb(255, 255, 255);
}

a:hover {
    color: rgba(211, 211, 211, 0.8);
}

.clearfix:after {
  content: " ";
  clear: both;
}

我尝试删除并更改每个元素的填充和边距的属性值。

我也尝试过改变它们的字体大小值。

没有什么对我有用，你们能看到问题在这里吗？

我是否正确使用了clearfix来清除浮动？这可能是所有这一切的原因吗？

我想在SAME线上显示两个元素。

谢谢。

Answer 1

不要浮动整个包装 - 标题，只需浮动元素：h1，main-nav并给它们50-50宽度或根据你的风格。

Answer 2

这是我改变的：

.main-nav ul li {
  margin: 0 10px;
}

body {
  font-size: 32px;
  background-color: rgb(30, 89, 152);
  color: rgb(255, 255, 255);
  font-family: Bookman, Georgia, serif;
}

.main-header {
  border-style: solid;
  border: 4px 2px;
  border-color: rgb(255, 255, 255);
  display: inline-block;
  float: left;

}
h1 {
  font-size: 2em;
  margin: 0px 0px;
}

.main-nav {
  float: right;
  text-align: right;
}

.main-nav ul {
  list-style-type: none;
}

.main-nav ul li a {
  text-decoration: none;
}

.main-nav ul li {
  display: inline-block;
  margin: 0px 10px;
  font-size: .8em;
  padding: 14px 0px; 
}


a:link {
  color: rgb(255, 255, 255);
}

a:visited {
  color: rgb(255, 255, 255);
}

a:hover {
  color: rgba(211, 211, 211, 0.8);
}

.clearfix:after {
  content: " ";
  clear: both;
}

<header class="main-header clearfix">
  <h1>Front-end Web Developer</h1>
  <nav class="main-nav">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="portfolio.html">Portfolio</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
</header>

Answer 3

试试这个我只调整了主导航课程中的保证金到保证金：0px 5px;

＆＃13;

body {
  font-size: 32px;
  background-color: rgb(30, 89, 152);
  color: rgb(255, 255, 255);
  font-family: Bookman, Georgia, serif;
}

.main-header {
  border-style: solid;
  border: 4px 2px;
  border-color: rgb(255, 255, 255);
  display: inline-block;
  float: left;
  background: blue;

}
h1 {
  font-size: 2em;
  margin: 0px 0px;
}

.main-nav {
  float: right;
  text-align: right;
}

.main-nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.main-nav ul li a {
  text-decoration: none;
   text-align: right;
    width: 100%;
}

.main-nav ul li {
  display: inline-block;
  margin: 0px 5px;
  font-size: .8em;
  padding: 14px 0px;

}


a:link {
  color: rgb(255, 255, 255);
}

a:visited {
  color: rgb(255, 255, 255);
}

a:hover {
  color: rgba(211, 211, 211, 0.8);
}

.clearfix:after {
  content: " ";
  clear: both;
}

＆＃13;

  
    <header class = "main-header">
        <h1>Front-end Web Developer</h1>
        <nav class = "main-nav">
            <ul>
                <li><a href = "index.html">Home</a></li>
                <li><a href = "about.html">About</a></li>
                <li><a href = "portfolio.html">Portfolio</a></li>
                <li><a href = "contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>

＆＃13;

为什么无序列表没有浮动到h1的右侧？

3 个答案: