Question

我正在尝试水平对齐制表符div，但它不起作用，我找不到我的错？

的index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Employees</title>
    <link rel="stylesheet" href="/calc/stylesheets/style.css">
  </head>
  <body>
    <div class="tabs">
      <div class="tab"><a href="/">Home</a></div>
      <div class="tab"><a href="/employee/new">Add Expenses</a></div>
      <div class="tab"><a href="/employee/new">Tags</a></div>
      <div class="tab"><a href="/employee/new">Overview     </a></div>
    </div>
  </body>
</html>

的style.css：

#tabs {
  overflow: hidden;
}
#tab {
  float: left;
}

Answer 1

你把课程和ID混在了一起。将您的CSS修改为：

.tabs {
   overflow: hidden;
}
.tab {
   float: left;
}

Answer 2

根据您的HTML

，

#tab应为.tab

Answer 3

您必须浮动类 .tab而不是ID。此外，当您浮动元素时，您需要在一个点清除。像这样：

<强> HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Employees</title>
    <link rel="stylesheet" href="/calc/stylesheets/style.css">
  </head>
  <body>
    <div class="tabs">
      <div class="tab"><a href="/">Home</a></div>
      <div class="tab"><a href="/employee/new">Add Expenses</a></div>
      <div class="tab"><a href="/employee/new">Tags</a></div>
      <div class="tab"><a href="/employee/new">Overview     </a></div>
      <div class="clear"></div>
    </div>
  </body>
</html>

<强> CSS

#tabs {
  overflow: hidden;
}

.tab {
  float: left;
}

.clear {
   clear: both;
}

小提琴：http://jsfiddle.net/hM62P/

Answer 4

您使用的是#tabs和#tab，HTML中根本没有。＃指ID。你需要使用.tabs和.tab来引用一个类。

.tabs{
     width:100%;
    border:1px solid red;
}

.tab{
    float:left;
}

Demo Link

Answer 5

使用此CSS，

.tabs {
   width:100%;
}
.tab {
    width:25%;
    float:left;
}

问题是您使用 #tab 而不是 .tab 。这里没有使用id。＃是id

div不水平对齐

5 个答案: