div块放置在HTML/CSS中

Question

div块放置在HTML/CSS中

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

代码段:

#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;
}

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

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

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

另一奇怪的事情,如果我把边框围绕"dashboardTabs"边框没有去各地"dashboardTab"组(即我写了"dashboardTabs"和"dashboardTab"的通知).

这是为什么？

谢谢.

Answer 1

Fra*_*key 6

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

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

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

.dashboardTab {
     display:inline-block; 
}

Run Code Online (Sandbox Code Playgroud)

这样,边框将出现,因为我们已经删除了float属性.

归档时间：	10 年，2 月前
查看次数：	92 次
最近记录：	10 年，2 月前