股利列表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。從以前的問題

代碼片段：

* { 
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; 
} 

HTML

<ul> 
<li><div>Text</div></li> 
<li><div>Text</div></li> 
<li><div>Text</div></li> 
</ul> 

希望這有助於。