如何将这两个div放在一行中

Question

如何将这两个div放在一行中

doc.html

.column {
  background-color: orange;
  width: 75%;
  vertical-align: top;
  display: inline-block;
  height: 200px;
}
.nav {
  vertical-align: top;
  display: inline-block;
  width: 25%;
  background-color: lightgreen;
  height: 200px;
}
* {
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
}

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>
<html>

<head>
  <link href="css2.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div class="container elem">
    <div class="nav"></div>
    <div class="elem column"></div>
  </div>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

我根据本指南learnlayout写了doc.html和css2.css.但页面看起来像这样.如何将这两个部分组成一行？

Answer 1

wil*_*lin 6

你的CSS是正确的; 这个问题是众所周知的空白问题.您需要确保标记之间没有空格:

<body>
    <div class="container elem"
        ><div class="nav"></div
        ><div class="elem column"></div
    ></div>
</body>

Run Code Online (Sandbox Code Playgroud)

这是因为您的内容是内联的,这使得空白.nav和.elem流动之间的空白.它很小(大约4px),但足以分离你的<div>s并打破你的布局.

通过将右括号放在下一个元素中的起始括号旁边,中间的所有空格都在标记内,而不是内容的一部分(因为标记可以包含属性和标记名称之间的空格,这没关系).

归档时间：	9 年，7 月前
查看次数：	555 次
最近记录：	9 年，7 月前