Question

我目前正在使用Zurb Foundation创建一个网站。（见下图）

我布置导航的方式是使用基础网格，如下所示：

HTML

<div class="row">


<!-- Navigation -->

  <nav class="top-bar">
    <div class="five columns">
    <div class="one columns"></div>
        <div class="five columns menu-elements rightalign">
        <a href="about.html">About</a>
        </div>
        <div class="one columns">
        <div class="split"></div>
        </div>
        <div class="five columns menu-elements rightalign">
        <a href="testimonials.html">Testimonials</a>
        </div>
    </div>
    <div class="two columns logo">
        <a href="index.html"><img src="images/logo.png" alt=""></a>
        </div>
    <div class="five columns">
        <div class="five columns menu-elements leftalign">
        <a href="services.html">Services</a>
        </div>
        <div class="one columns">
        <div class="split"></div>
        </div>
        <div class="five columns menu-elements leftalign">
        <a href="contact.html">Contact</a>
        </div>
        <div class="one columns"></div>
    </div>

CSS

.top-bar { font-family: 'bebas_neueregular'; display: flex; text-align:center; margin-bottom:0px;
.menu-elements{ color: white; display: block; font-size: 32px; font-weight: normal; height: 45px; ; margin: 60px 0 0 0;}
.menu-elements > a{ color: white; }
.menu-elements > a:hover{ color:#e87524;}

.logo{padding: 10px 0 0 0; text-align:center; margin:auto;}

.split{width: 3px;background: white;height: 28px; font-size: 32px; margin: 60px 0 0 0; text-align:center;}

.leftalign{text-align:left}
.rightalign{text-align:right;}

我遇到的问题是菜单实际看起来的方式。

This is with the rightalign and leftalign classes included.

And this is without them included.

我希望菜单为：

1：使用Logo死点，因此我将导航设置为单独的div。

2：链接每个都占用一定的空间，但是我编码的方式使得Testimonials链接占用的空间比另一个链接的更多，因为它更长，这使得它看起来不合适更接近Logo。我试着通过使用text-align样式来修复这个问题，以使两个内部链接更接近徽标。但它仍然看起来不正确。

我想知道是否有人能想到我可以尝试的任何其他方式？也许通过在字母之间分配更多空格，使实际字体拉伸字母以满足div的边缘或div的某个百分比？我现在会听取任何建议。

如果这不一定是一个编程问题，请指出我正确的方向。我正在寻找可以在代码或外部阅读中尝试的答案：即：“查看它可能会有所帮助”或“在此尝试此代码它应该纠正它们”。

感谢您的任何建议！

基础菜单对齐中心问题

0 个答案: