html - 表格中的奇怪错误

Question

我有一张有 2 行 6 列的表格。

我在玩，inspect element并提供了我需要的解决方案（见下图）

如您所见，它现在看起来不错。

一旦我将它应用到网站的 css 中，它如下所示：

CSS

style1 //Categorie
{
    width:175px;
    display:inline-block;
}

.style2
{
width: 175px; //Klant
}

.style3
{
    width:175px; // Website
}

.style4
{
    width:175px; // Titel
}

我输入的代码是第一行（下拉菜单Categorie）display:inline-block

任何人都知道结果可能会有所不同吗？

我需要将“Klant”移到左侧，靠近“Categorie”

Answer 1

删除显示标签并在所有样式块中添加一个 float: left 另外：您在 style1 之前错过了一个点

.style1 //Categorie
{
    width:175px;
    float: left;
}

.style2
{
width: 175px; //Klant
float: left;
}

.style3
{
    width:175px; // Website
    float: left;
}

.style4
{
    width:175px; // Titel
    float: left;
}

如果这不起作用，请发布html

Answer 2

从屏幕截图中，唯一的区别似乎是第二个表格更宽：

这就是你要解决的问题吗？

我怀疑您的问题只是表格流入更广泛的区域（因此列更宽，表格中的所有内容都分开了）。您发布的课程是否有可能分配给选择而不是表格单元格？

如果是这种情况，最好的办法是为表格分配一个宽度 - 您可以通过给表格一个类并在其中分配宽度来做到这一点，或者直接在表格中标记自己（不太推荐）。