为什么我的桌子不是水平相邻的?
Why aren't my tables next to each other horizontally?
当我希望它们水平排列时,我的桌子却垂直排列。
我试过使用 flex-container,但它似乎没有任何作用。
<div class = "flex-container">
<div>
<h2>Types of Cards</h2>
<div>
<table></table>
</div>
<div>
<table></table>
</div>
<div>
<table></table>
</div>
<div>
<table></table>
</div>
</div>
</div>
单独添加 class 名称而不添加任何 CSS 不会有任何效果。
在您的 HTML 中,每个 table
元素都位于 div
中。 divs 和 tables 的默认 display
设置是 block
,这意味着它们之后的任何元素将显示在它们下面,而不是它们旁边。
可能的解决方法是将 CSS display
设置为 inline
,每个 table 和 div 都包含一个 table。我添加了一些示例内容以更好地可视化输出:
.table-div {
display: inline;
}
/*Targets all tables that are inside a div of class table-div*/
.table-div table {
display: inline;
}
<div>
<h2>Types of Cards</h2>
<div class="table-div">
<table>
<tr>
<td>Something1</td>
<td>Something1</td>
</tr>
</table>
</div>
<div class="table-div">
<table>
<tr>
<td>Something2</td>
<td>Something2</td>
</tr>
</table>
</div>
<div class="table-div">
<table>
<tr>
<td>Something3</td>
<td>Something3</td>
</tr>
</table>
</div>
<div class="table-div">
<table>
<tr>
<td>Something4</td>
<td>Something4</td>
</tr>
</table>
</div>
</div>
当我希望它们水平排列时,我的桌子却垂直排列。
我试过使用 flex-container,但它似乎没有任何作用。
<div class = "flex-container">
<div>
<h2>Types of Cards</h2>
<div>
<table></table>
</div>
<div>
<table></table>
</div>
<div>
<table></table>
</div>
<div>
<table></table>
</div>
</div>
</div>
单独添加 class 名称而不添加任何 CSS 不会有任何效果。
在您的 HTML 中,每个 table
元素都位于 div
中。 divs 和 tables 的默认 display
设置是 block
,这意味着它们之后的任何元素将显示在它们下面,而不是它们旁边。
可能的解决方法是将 CSS display
设置为 inline
,每个 table 和 div 都包含一个 table。我添加了一些示例内容以更好地可视化输出:
.table-div {
display: inline;
}
/*Targets all tables that are inside a div of class table-div*/
.table-div table {
display: inline;
}
<div>
<h2>Types of Cards</h2>
<div class="table-div">
<table>
<tr>
<td>Something1</td>
<td>Something1</td>
</tr>
</table>
</div>
<div class="table-div">
<table>
<tr>
<td>Something2</td>
<td>Something2</td>
</tr>
</table>
</div>
<div class="table-div">
<table>
<tr>
<td>Something3</td>
<td>Something3</td>
</tr>
</table>
</div>
<div class="table-div">
<table>
<tr>
<td>Something4</td>
<td>Something4</td>
</tr>
</table>
</div>
</div>