使用文本将div拆分为多个部分

Question

我正在网站上工作。并有一些菜单。 但是我有一个问题是将信息以正确的方式放在我的屏幕上。

我有一个宽度为970px的导航包装。 在那个包装中我有4个不同的区域

• 导航
• 语言切换器
• 样式切换器
• 搜索框

我可以将4个最后的项目赋予固定宽度并将其浮动到右侧。 所以我可以给导航一些固定的宽度。

但后来我遇到了问题。 在导航div中。你有每个菜单的结构。 喜欢

<ul id="mainMenu">
  <li class="level1">
    <ul> 
       ... Subitems ...
    </ul>
    <a>Item 1</a>
  </li>
  <li class="level1">
    <ul> 
       ... Subitems ...
    </ul>
    <a>Item2 that is longer</a>
  </li>
</ul>

在下面的屏幕上，你会看到我的意思。 前4项是导航。

我需要拆分所有菜单项 宽度结束。 如你所见，它分为4件。每个李都有边框。 文本应该在每个li的中间。 但是，我如何根据我们使用的文本进行分配。

http://prntscr.com/27j2q

Answer 1

我已经解决了这个问题。

我使用了填充属性。因为我知道菜单中的项目。 Normaly他们不会改变。所以我可以这样做。 一些动态的东西应该会更好。 但现在它也已经解决了。