Question

我正在使用<nav>构建一个导航栏，我正在将文本对齐到右边但是我想让导航栏中的徽标位于左侧我尝试了很多方法来移动它就像给它一样一个id并使用!important但它仍然无法移动

这是我的相关HTML

<div id="navDiv">
    <nav>
        <a href="me.html" id="logo">Name</a>
        <a href="home.html">Home</a>
        <a href="about.html">About</a>
        <a href="mailto:email@example.com">Contact</a>
    </nav>
</div>

这是我的CSS

#logo
{
    text-align:left !important;
}

nav
{
    text-align:right;
}

当!important告诉它向左移动时，为什么徽标元素仍在右侧？如何解决此问题？

Answer 1

添加float:left;

#logo
{
    float:left;
}
nav
{
    text-align:right;
}

现场演示：JSFiddle

Answer 2

如果我理解正确，你想要＆＃34;姓名＆＃34;出现在左边，而其他一切都在右边？所以，像这样：http://jsbin.com/gejefiji/1/edit

我在那里做的唯一事情是向float: left;选择器添加#logo。

即使使用nav，#logo规则覆盖!important规则的原因是嵌套。 nav本身是一个块元素，这意味着它会扩展以填充其容器。 a标记不是块元素，它们是内联的，这意味着它们遵循包含元素的对齐规则，这意味着它们可以正确对齐文本。如果您检查浏览器开发工具的布局部分中的元素，您可以看到a元素的宽度缩小到适合内容，如下所示：

enter image description here

a#logo内的文字是左对齐的，但元素本身是右对齐的，因此它似乎不符合您的要求。

如果您确实使用float: left，我强烈建议您在导航后添加何时何地使用clear: left元素，以防止任何浮动属性形成干扰其余部分页面的布局。 Emre的nav:after技巧很方便，但并不是所有浏览器都支持，因此您可能需要一个分配了特定类的单独元素，如下所示：

// CSS .clear { clear: left; } // HTML </nav>  </div>  <div class="clear"></div>

基本上，您希望将clear置于您 想要浮动的其他任何内容之前。

Answer 3

text-align属性只能应用于包含项目的框级项目，无论是向左还是向右 - 而不是项目本身。因此，你不能在导航文本对齐的左边有一些项目，并且一些文本对齐就这样。

但是，您可以将徽标左侧浮动：

#logo{float:left;}

Answer 4

这里是:)应该运行良好[测试]

  <style>

    nav
    {
        text-align:right;
    }
    #logo
    {
        float:left;
    }
    nav:after { /* fix float */
        visibility: hidden; 
        display: block; 
        font-size: 0; 
        content: " "; 
        clear: both; 
        height: 0; 
    }
    </style>
    <div id="navDiv">
        <nav>
            <a href="me.html" id="logo">Name</a>
            <a href="home.html">Home</a>
            <a href="about.html">About</a>
            <a href="mailto:email@example.com">Contact</a>
        </nav>
    </div>

Answer 5

为什么不使用float？

#logo {
  float:left;
}

如何在导航中对齐一个项目的文本？

5 个答案: