Question

我做了这个演示：https://jsfiddle.net/qtpsqchq/1/

代码段：

＆＃13;

#dashboardHeader {
  color: white;
  background-color: #42637B;
  border: 1px solid black;
}
#dashboardTabs {
  margin: 0 auto;
  width: 50%;
}
.dashboardTab {
  color: white;
  background-color: #39556A;
  border: 1px solid black;
  padding-left: 25px;
  padding-right: 25px;
  margin: 3px;
  float: left;
}

＆＃13;

<body>
  <title>Dashboard</title>

  <div id="dashboardBox">

    <div id="dashboardHeader">
      <h1 align="center">Dashboard</h1>
    </div>

    <div id="dashboardTabs">
      <div class="dashboardTab">
        <h3>1</h3>
      </div>
      <div class="dashboardTab">
        <h3>2eq</h3>
      </div>
      <div class="dashboardTab">
        <h3>3</h3>
      </div>
    </div>

    <div id="dashboardContent">

    </div>

  </div>

</body>

＆＃13;

我想要的是获得此结果：http://s4.postimg.org/x6p45agq4/maquette.jpg

但是这个区块没有像我想要的那样居中，3个方格应该居中。

另一个奇怪的事情，如果我把边框放在＆＃34; dashboardTabs＆＃34;边界不会绕过＆＃34; dashboardTab＆＃34;小组（注意我写了＆＃34; dashboardTabs＆＃34;和＆＃34; dashboardTab＆＃34;）。

为什么？

感谢。

Answer 1

您可以在包装div上使用text-align center，并将tab div设置为内联块元素，如下所示：

https://jsfiddle.net/qtpsqchq/3/

#dashboardTabs {    
      width:100%;
      text-align:center; 
 }

.dashboardTab {
     display:inline-block; 
}

这样，边框将出现，因为我们删除了浮动属性。

Answer 2

Flexbox解决方案，也需要移除浮动。

#dashboardHeader {
  color: white;
  background-color: #42637B;
  border: 1px solid black;
}
#dashboardTabs {
  margin: 0 auto;
  width: 50%;
  display: flex;
  justify-content: center;
  border:2px solid green;
}
.dashboardTab {
  color: white;
  background-color: #39556A;
  border: 3px solid red;
  padding-left: 25px;
  padding-right: 25px;
  margin: 3px;
}

<body>
  <title>Dashboard</title>

  <div id="dashboardBox">

    <div id="dashboardHeader">
      <h1 align="center">Dashboard</h1>
    </div>

    <div id="dashboardTabs">
      <div class="dashboardTab">
        <h3>1</h3>
      </div>
      <div class="dashboardTab">
        <h3>2</h3>
      </div>
      <div class="dashboardTab">
        <h3>3</h3>
      </div>
    </div>

    <div id="dashboardContent">

    </div>

  </div>

</body>

我还强调了边框，以便您可以看到被应用于标签。我还在选项卡包装器中添加了一个边框以供视觉参考。

div块放置在HTML / CSS中

2 个答案: