HTML 浮动属性

Question

<nav>
    <div class="row">
       <img src="resources/img/logo-white.png" alt="logo" class="logo">
           <ul class="main-nav">
               <li><a href="#">Food delivery</a></li>
               <li><a href="#">How it works</a></li>
               <li><a href="#">Our cities</a></li>
               <li><a href="#">Sign up</a></li>
           </ul>
   </div>
</nav>

我正在关注 Udemy 教程中的导航栏代码。 navbar 的 CSS 源代码如下：

.row {
    max-width: 1140px;
    margin: 0 auto;
}

.logo {
    height: 100px;
    width: auto;
    margin-top: 20px;
}

.main-nav {
    float: right;
    list-style: none;
    margin-top: 60px;
}

我感到困惑的部分是 div 中的 img 和 class="row" 为什么图像被推迟到左上角，即使我没有设置将 img 的属性浮动到 float: left;。正如您在下面的 image 中看到的那样，尽管我从未设置 float 属性，但 white 徽标位于 top left至 left。但是对于 ul 和 class="main-nav" 我必须将 float 属性设置为 right.

Answer 1

img 是内联元素 & ul 是块级元素。这意味着 ul 将采用 100% 宽度并在新行上，而 img 将采用其特定宽度。默认情况下方向是 ltr 所以我们让所有内联元素都向左浮动。

Answer 2

left 一侧的徽标 displays 作为每个 HTML 元素的默认方向具有 "rule" LTR，因此这意味着即使尽管 display 在 left 一侧，但您还没有制作 float: left 行。

看看this，应该会对你有所帮助，编程愉快！

HTML 浮动属性

HTML Float Property

html

css

css-float

HTML 浮动 属性

HTML Float Property

html

css

css-float

HTML 浮动属性