居中菜单左对齐

我正在寻找一种解决方案，以直接在居中主要点下对齐子列表。下面是一些图片，让你知道我想要实现：居中菜单左对齐

enter image description here

但现在，当我有一个中心主列表点（LEISTUNGEN），我不能得到，我想它的子列表成为。我可以居中：

enter image description here

的主要问题是，主列表点是宽度可变，所以我不能只用一个填充的子列表把它LEISTUNGEN下。

任何人都知道可能的解决方案？

这里是我的结构：

<ul class="mainmenu"> 
    <li><a href="#">Leistungen</a> 
    <ul> 
     <li><a href="#">mehr Leistungen</a> 
     <li><a href="#">Leistungen 2</a> 
     <li><a href="#">Und noch mehr davon</a> 
    </ul> 
    </li> 
</ul>

和CSS至今：

.mainmenu { 
    width:100%; 
    display:table; 
    padding-top:12px; 
} 
.mainmenu > li { 
    display: table-cell; 
    text-align:center; 
    padding-bottom: 7px; 
} 
.mainmenu > li > a { 
    display:block; 
    color: #636466; 
    text-decoration:none; 
    text-transform:uppercase; 
} 
.mainmenu ul { 
    display:block; 
    position:relative; 
} 
.mainmenu ul > li { 
    position:relative; 
} 
.mainmenu ul > li > a { 
    color:#1a4787; 
    text-decoration:none; 
}

来源

2014-10-08 Andi

更新与以下，还包括list-style:none到类.mainmenu ul > li

CSS

你的CSS

.mainmenu ul{ 
    display:inline-block; 
    text-align:left; 
}

Fiddle Demo

来源

2014-10-08 07:13:49 Aru

居中菜单左对齐

回答

相关问题