在td标签内使用div

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>

- user

---

.boxed 的样式是什么？ - Ahmad

Answer 1

将“账号”文本用

标签括起来，并在该

中加入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>

- Pupil

Answer 2

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

- Rakesh Lankapalli

Answer 3

你可以使用 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代码编辑器

- Sougata Bose

Answer 4

您可以尝试以下HTML结构，并查看下面的fiddle链接：

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

- Jainam

Answer 5

你可以将 float: left; 替换为 display: inline-block; 如果你想要盒子顶部对齐，添加 vertical-align: top;

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

- Suma Chaganti