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

我正在使用

构建一个导航栏，我正在将文本向右对齐，但我想让导航栏中的徽标位于左侧。我尝试了很多方法来移动它，比如给它一个id和使用

！重要信息

但它仍然无法移动

这是我的相关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>

---

为什么

时徽标元素仍在右侧！重要信息

告诉它向左走，我如何解决这个问题？

如果我理解正确，您希望“名称”显示在左侧，而其他所有内容都显示在右侧？那么像这样,

我在那里做的唯一一件事就是添加一个

float:left至
#徽标
选择器

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


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

如果您确实使用
float:left
，我强烈建议您考虑在导航后添加
clear:left
元素的位置和时间，以防止任何float属性干扰页面的其余布局。Emre的
nav:after
技巧很方便，但并非所有浏览器都支持，因此您可能需要一个单独的元素，并为其指定特定的类，如下所示：

// CSS
.clear {
    clear: left;
}

// HTML
    </nav> <!-- after the nav -->
</div> <!-- or after the div -->
<div class="clear"></div>

//CSS
.清楚{
清除：左；
}
//HTML

基本上，你想把
清除
放在你不想浮动的任何东西之前。
如果我理解正确，你想让“Name”显示在左边，而其他所有东西都显示在右边？那么像这样,

我在那里做的唯一一件事就是添加一个
float:left至
#徽标
选择器

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


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

如果您确实使用
float:left
，我强烈建议您考虑在导航后添加
clear:left
元素的位置和时间，以防止任何float属性干扰页面的其余布局。Emre的
nav:after
技巧很方便，但并非所有浏览器都支持，因此您可能需要一个单独的元素，并为其指定特定的类，如下所示：

// CSS
.clear {
    clear: left;
}

// HTML
    </nav> <!-- after the nav -->
</div> <!-- or after the div -->
<div class="clear"></div>

//CSS
.清楚{
清除：左；
}
//HTML

基本上，您希望将
清除
放在不希望浮动的任何内容之前。
文本对齐
属性只能应用于包含要左对齐或右对齐项目的框级项目，而不能应用于项目本身。因此，不能让导航文本中的某些项目向左对齐，而让某些文本向右对齐

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

#logo{float:left;}

text align
属性只能应用于包含要左对齐或右对齐项目的框级项目，而不能应用于项目本身。因此，不能让导航文本中的某些项目向左对齐，而让某些文本向右对齐

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

#logo{float:left;}

添加<代码>浮动：左

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

现场演示：
添加
浮动：左侧

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

现场演示：
这里是：）应该可以很好地工作[测试]

  <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>


导航
{
文本对齐：右对齐；
}
#标志
{
浮动：左；
}
导航：{/*固定浮动之后*/
可见性：隐藏；
显示：块；
字号：0；
内容：“；
明确：两者皆有；
身高：0；
}
这里是：）应该可以很好地工作[经过测试]

  <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>


导航
{
文本对齐：右对齐；
}
#标志
{
浮动：左；
}
导航：{/*固定浮动之后*/
可见性：隐藏；
显示：块；
字号：0；
内容：“；
明确：两者皆有；
身高：0；
}
为什么不使用浮点

#logo {
  float:left;
}

为什么不使用float

#logo {
  float:left;
}

是的，这正是我所期待的DOYEP，这正是我所期待的，它几乎是正确的，但是现在的“X”标志在导航栏的底部，而其他的元素在导航卫星的高度中间。这几乎是正确的，但是现在的标志是在导航栏的底部，而其他的元素在导航卫星的高度的中间。