Question

经过数小时的Google搜索，我设法让{ display : table }和{ vertical-align : bottom }工作。但是，如果我更改名为＆＃34; big div＆＃34;的div类的名称。对于任何其他名称，然后容器上的表属性和下面的UL项目停止工作，菜单不再定位。

.big div
{
    background-color : #328332 ;
    width : 100% ;
    height : 90px ;
    margin-top : 0 ;
    color : white ;
    text-align : center ;
    position : relative 
}

.tablecontain
{
  display : table
}

.menu 
{
    margin : 0  ;
    list-style : none ;
    padding : 0 ;
    display : table-cell ;
    vertical-align : bottom
}

.menu li 
{
    display : inline-block
}

.menu li a
{
    text-decoration : none ;
    padding : 15px ;
    background-color : #006400 ;
    color : white ;
    display : block ;
    margin : 0 
}

Here是一个可以正常运行的JSfiddle。

here就是我给div另一个名字＆＃34; container＆＃34;它停止工作。

我尝试将display: table和table-cell属性应用于不同的元素，但我无法以其他方式执行此操作。我还要提一下，我尝试将表属性应用于＆＃34; big div＆＃34;不使用tablecontain div的课程。那没用。

另外，我很好奇其他方法。我可以在容器上做相对位置并在菜单上定位绝对，但是有其他或更常用的方式来移动菜单吗？

Answer 1

问题是div是css中的保留字，用于选择任何 div 标记

您的课程名为.big 而不是 big div

你可以使用多个类通过间距为每个类添加样式，所以在这种情况下：

.big div

您正在选择包含.big

的班级div

Answer 2

.big div选择div类下的.big元素。如果您要将.big div的名称更改为.container并将样式应用于.container，则无法使用该样式，因为您必须将样式应用于tablecontain才能正常工作。在您的第二个小提琴中，将.container替换为tablecontain。

Answer 3

更改

.container
{
   background-color : #328332 ;
   width : 100% ;
   height : 90px ;
   margin-top : 0 ;
  color : white ;
  text-align : center ;
  position : relative 
}

到

.container div
 {
   background-color : #328332 ;
   width : 100% ;
   height : 90px ;
   margin-top : 0 ;
   color : white ;
   text-align : center ;
  position : relative 
 }

一切正常，希望有所帮助

垂直对齐菜单和表格显示

3 个答案: