Question

我想了解我的初始网站的CSS基础知识。我怎样才能定位下面的div，所以我会有这个结构。徽标，通话和留言只是文字（或图片）贝娄他们是导航栏（我猜无序列表）

这是我的代码：

＆＃13;

* {
  margin: 0px;
  padding: 0px;
}

body {
  background-color: #a4afc1;
}

#container {
  width: 1080px;
  margin-top: 10px;
  margin-right: auto;
  margin-bottom: 10px;
  margin-left: auto;
  position: relative;
  background-color: #EEE;
}

＆＃13;

<div id="container">
  <header>
    <div id="branding">
      <h3>logo</h3>
    </div>

    <div id="callme">
      <h3>Call me</h3>
    </div>

    <div id="msgme">
      <h3>Message me</h3>
    </div>

  </header>
</div>

＆＃13;

Answer 1

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        .left {
            float:left;
        }
        .right {
            float:right;
        }
        .clear {
            clear:both;
        }
        ul {
            margin:0;
            padding:0;
        }
        li {
            list-style-type:none;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">Logo</div>
        <div class="right">
            <span>Call</span>
            <span>Message</span>
        </div>
        <nav class="clear">
            <ul>
                <li class="left">
                    link A
                </li>
                <li class="left">
                    link B
                </li>
                <li class="left">
                    link C
                </li>
            </ul>
        </nav>
    </div>
</body>
</html>

水平元素间距在css中不均匀

1 个答案: