Question

我正在创建一个带有水平导航栏的网站，其中按钮被设计为元素，使它们易于区分，并且当您将它们悬停在它们上时它们会单独点亮。这是一个链接：http://allpropestmanagement.net/commercial2.html 显然不是成品。

我当前的问题涉及导航栏最右侧的大紫色区域，即不是按钮的区域。这也是一个元素，但是禁用悬停和一大堆不间断空格来填充它。那就是问题所在。我希望那个紫色的场一直延伸到右端（有一个很小的边缘，就像在左边那样）。你可以想象，问题在于它们的数量是有限的，并且它们不能扩展。因此，如果导航栏在我的计算机上是完美的长度，例如16 nbsps，则在其他人的机器上它将无法完全到达而在另一个人身上它将达到太远。

html看起来像这样：

<div id="navmenu">
                <form>
                    <a href="index.html" style="border-top-left-radius:25px;">Home</a>
<a href="commercial.html">Commercial</a>
<a href="about.html">Meet The Pro</a>
<a href="contact.html">Contact</a>
<a id="farright" style="border-top-right-radius:25px;">
<i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"We'll get the job done right!"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</i></a>
                </form>
            </div>

我觉得这很奇怪，但css有点笨重，我在格式化这篇文章时遇到了麻烦。也许这个帖子可见后我会在几分钟内添加它，但css文件是“smithmicropurple.css”。

无论如何，我想要一种方法来拉伸该元素，使其始终正确，或者如果没有，可以实现相同的效果。我已经尝试为每个元素单独设置宽度，但这似乎不起作用。

Answer 1

我喜欢做这些类型的事情来“帮助”其他人（很少，如果我很幸运），还要帮助我了解更多有关html / css的信息。

所以我用这个FIDDLE给了老大学试试。

HTML

<div class='holderdiv'>
 <a href='#'>One</a>
 <a href='#'>Two</a>
 <a href='#'>Three</a>
 <a href='#'>Four</a>
 <a href='#'>We'll Get the Job Done Right!</a>
</div>

我不会发布CSS，因为它很长。这是小提琴。

请不要将此视为“真正的”答案。也许只是想一想。

Answer 2

从语义上讲，我不确定父为什么是form元素，我建议将其更改为HTML5 <nav>元素。（假设你当然使用的是HTML5）

此处采用的方法是将子元素设置为display:table-cell，并为目标元素#farright提供宽度100%以填充剩余空间。此外，text-align:center将有效地居中所有子元素。无需%nbsp;

#navmenu {
    font-size: 14pt;
    margin: 5px 0 0 5px;
}
#navmenu form {
    width: 940px;
}
#navmenu form > a {
    display: table-cell;
    white-space: nowrap;
    text-align:center;
}

#navmenu #farright {
    width:100%;
}

延长<a> elements to extend gradient nav bar to end of page</a>

2 个答案: