将文本居中并缩小元素以适合显示的内联块元素

Question

我目前正在为我的网站创建一个导航栏，我到处寻找并尝试了一些东西，但我无法弄清楚我捏造了什么：P

无论如何，我有一些我命名为“nav-box”的框，它们在其中包含导航元素。我有这些显示的内联块，以便它们看起来像导航元素。

现在有两件事，这些框内的文本粘在框的左侧，我必须让它们居中。除此之外，盒子看起来真的很大。我必须手动设置它们的宽度还是让 css 使它们适合？

这是我用我的代码创建的 JSFiddle。我已经尝试将'inline-block'添加到元素及其父容器中，但它们都不适用于这种情况:(

这是我尝试过的：

.nav > .nav-content > .nav-inner {
    width: auto;
    float: right;
    text-align: center;
}

如您所见，这是我的父元素包含 nav-box 元素，我添加了 text-align: center;，但它仍然没有满足我的需要。

http://jsfiddle.net/qhPwt/

Answer 1

框内的文本未居中对齐，因为有一个margin-right 应用于框内的内容。

检查这个FIDDLE

CSS 变化

.nav > .nav-content > .nav-inner > .nav-box > .nav-link:last-child {
    margin-right: 80px; // Remove this style
}