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