Div list horizo​​ntaly

Question

我希望能够使用javascript创建一个代码列表，如下所示：

What I want to do

但是，我无法想象如何使用html和css对此进行编码。我在这里，网站上或网上的其他地方尝试了多种方式。

我找到了一种“对齐它们”的方法，但它们没有居中。

您可以在此处查看我的实际代码：

<div id="div1">
<div id="div2">Content2</div>
<div id="div3">Content3</div>
<div id="div4">Content4</div>
<div id="div5">Content5</div>
<div id="div6">Content6</div>
<div id="div7">Content7</div>
</div>


#div1 div{
width: 65px;
height: 100px;
margin-left:2%;
float:left;
color: white;
align:center; 
}

#div1{
margin:0px auto;
width:500px;
height: 100px;
background-color:black;
overflow:hidden;
}

Answer 1

我希望，你看起来像下面的

.box{
    background-color: #53BBFB;
    float: left;
    height: 74px;
    margin: 15px 5px 5px 0;
    padding-top: 22px;
    width: 181px;
    text-align:center;
}

<div id="div1" class="box">Content1</div>
<div id="div2" class="box">Content2</div>
<div id="div3" class="box">Content3</div>
<div id="div4" class="box">Content4</div>
<div id="div5" class="box">Content5</div>
<div id="div6" class="box">Cont

检查一下http://codepen.io/anon/pen/zvoLWG

编辑： 如果你看起来像链接中的图像，请尝试下面的

.box{    
    float: left;    
    margin: 15px 5px 5px 0;
    padding-top: 22px;    
    text-align:center;
}
.grid-box1 {
  background-color: #F2F2F2;
  height: 30px;
  width: 65px;
  margin-top:40px;
}
.grid-box2 {
  background-color: #DFDFDF;
  height: 40px;
  width: 70px;
  margin-top:35px;
}

.grid-box3 {
  background-color: #C0C0C0;
  height: 50px;
  width: 75px;
  margin-top:10px;
  margin-top:30px;
}
.grid-box4 {
  background-color: #A1A1A1;
  height: 60px;
  width: 80px;
  margin-top:10px;
  margin-top:25px;
}

<div id="div1" class="box grid-box1">Content1</div>
<div id="div2" class="box grid-box2">Content2</div>
<div id="div3" class="box grid-box3">Content3</div>
<div id="div4" class="box grid-box4">Content4</div>
<div id="div5" class="box grid-box3">Content5</div>
<div id="div6" class="box grid-box2">Content6</div>
<div id="div7" class="box grid-box1">Content7</div>

在此处查看http://codepen.io/anon/pen/zvoLmv

Answer 2

不要浮动元素，而是在父容器上使用display: inline-block和text-align: center。

#div1 div {
  width: 65px;
  height: 100px;
  margin: 0% 2%;
  display: inline-block;
  color: white;
  border: 1px dotted yellow;
}
#div1 {
  margin: 0px auto;
  width: 500px;
  height: 100px;
  background-color: black;
  overflow: hidden;
  text-align: center;
}

<div id="div1">
  <div id="div2">Content2</div>
  <div id="div3">Content3</div>
  <div id="div4">Content4</div>
  <div id="div5">Content5</div>
  <div id="div6">Content6</div>
  <div id="div7">Content7</div>
</div>

Answer 3

我建议您使用UL和LI来控制边距。 我之前已经看到过这个问题here。

上一个问题的代码段：

 mvn install:install-file -Dfile=myLibrary.jar -DgroupId=com.mycompany -DartifactId=myLibrary -Dversion=1.0 -Dpackaging=jar

<强> HTML

* {
margin: 0;
padding: 0;
}
ul {
background: #48D;
height: 35px;
line-height: 25px;
width: 300px;
}
li {
float: left;
list-style-type: none;
margin: 5px 0 0 5px;
}
li div {
background: #6AF;
padding: 0 5px;
}

希望这有帮助。