ein div in einem td-Tag

Question

i einen Code verwenden möchten, die als No
Konto zeigt:

Aber in meinem Code seiner als angezeigt

und mein Code wie unten

<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

den Account No. Text mit einem div beilegen und

CSS "float:left"

Zu diesem div hinzuzufügen.

Arbeitscode:

<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

Sie können div verwenden, um sie zu wickeln und 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

Sie können diese HTML-Struktur versuchen und wie unten Geige Link sehen:

<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

Sie Schwimmer ersetzen können: left; mit Anzeige: Inline-Block; Und wenn Sie möchten, dass die Boxen oben ausgerichtet sind, fügen Sie vertikal-align hinzu: top;

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