使用td標籤

Question

我想這顯示爲
帳號代碼內一個div：

但在我的代碼，它顯示爲

和我的代碼如下

<td colspan="3">Account No:<div class="boxed"> 

     </div> 
    <div class="boxed"> 

    </div> 
    <div class="boxed"> 

    </div> 
    <div class="boxed"> 

    </div> 
    <div class="boxed"> 

    </div> 
    </td> 

Answer 1

括起來Account No.文本用DIV，並添加

CSS "float:left"

到該專區。

工作代碼：

<table> 
<tr> 
    <td colspan="3" style="float: left;"> 
     <div style="float: left">Account No:</div> 
     <div class="boxed"></div> 
     <div class="boxed"></div> 
     <div class="boxed"></div> 
     <div class="boxed"></div> 
     <div class="boxed"></div> 
    </td> 
</tr> 
</table> 
<style> 
.boxed { 
    border: 1px solid; 
    width: 50px; 
    height: 50px; 
    float: left; 
} 
</style> 

Answer 2

您可以使用div來包裝他們，float。

<td colspan="3"> 
    <div style="float:left;padding:15px 5px 0 0;">Account No:</div> 
    <div style="float:right;"> 
     <div class="boxed"></div> 
     <div class="boxed"></div> 
     <div class="boxed"></div> 
     <div class="boxed"></div> 
     <div class="boxed"></div> 
    </div> 
</td> 

Fiddle

Answer 3

你可以試試這個網站的結構，看看下面撥弄鏈接：

<td colspan="3"> 
<div class="title"> 
Account No: 
</div> 
<div class="boxed"> 
1 
     </div> 
    <div class="boxed"> 
2 
    </div> 
    <div class="boxed"> 
3 
    </div> 
    <div class="boxed"> 
4 
    </div> 
    <div class="boxed"> 
5 
    </div> 

CSS：

.title { 
    float: left; 
    width: 20%; 
} 
.boxed { 
    border: 1px solid; 
    float: left; 
    padding: 10px 0; 
    text-align: center; 
    width: 7%; 
} 

https://jsfiddle.net/wwta4e8h/

Answer 4

.box{ 
 
    border: 1px solid; 
 
    width: 30px; 
 
    height: 30px; 
 
    float: left; 
 
}

<div style="float: left;"> 
 
     <div style="float: left;padding-top:10px;padding-right:10px">Account No:</div> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
    </div>

Answer 5

您可以將float：left;帶顯示：inline-block;如果你想要盒子頂部對齊添加vertical-align：top;

<style> 
    .boxed { 
     border: 1px solid black; 
     display: inline-block; 
     vertical-align: top; 
     width:30px; 
     height:30px; 
    } 
</style>