Question

我想要一个显示为
的代码户口号码：

但在我的代码中，它显示为

我的代码如下

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

到那个div。

工作代码：

<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

你可以试试这个html结构并看到如下的小提琴链接：

<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;带显示：内联块;如果你想让盒子顶部对齐，请添加vertical-align：top;

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

在td标签内使用div

5 个答案: