Html CSS样式对齐_Html_Css - Fatal编程技术网

Html CSS样式对齐

html css

Html CSS样式对齐,html,css,Html,Css,晚上好。下面的代码是我网站上导航栏的代码。两个无序列表目前并排（内联）放置，这正是我想要的。但是，我希望第二个坐在右边。我知道有几种方法可以实现这一目标。我的问题是针对这种方法的，因为我不明白为什么会发生这种情况。为什么，如果我将以下代码添加到样式表（.float{float:right}），第二个代码会向右移动，但不会与第一个代码保持“内联”；它显示在一个稍微不同的层面上？我不明白为什么会这样。有人能解释一下吗其次，如果我向每个无序列表中添加一个不同的类，并向右浮动一个，向左浮动一个，则同时

晚上好。下面的代码是我网站上导航栏的代码。两个无序列表目前并排（内联）放置，这正是我想要的。但是，我希望第二个坐在右边。我知道有几种方法可以实现这一目标。我的问题是针对这种方法的，因为我不明白为什么会发生这种情况。为什么，如果我将以下代码添加到样式表（.float{float:right}），第二个代码会向右移动，但不会与第一个代码保持“内联”；它显示在一个稍微不同的层面上？我不明白为什么会这样。有人能解释一下吗

其次，如果我向每个无序列表中添加一个不同的类，并向右浮动一个，向左浮动一个，则同时删除CSS（.nav ul{display:inline；），我不明白为什么它们彼此“串联”在一起？是什么指示它们这样做的？浮点：右侧指令如何指示元素向上移动？非常感谢显示：内联； }











.导航a{
颜色：#5A5A；
字体大小：11px；
字体大小：粗体；
填充：14px 10px；
文本转换：大写；
}
李国荣先生{
显示：内联；
}
美国海军{
显示：内联；
}

当元素的display CSS属性的计算值为：inline、inline block或inline table时，称元素为inline级别。从视觉上看，它并不构成内容块，而是与其他内联级内容一起以行的形式分布。通常，段落的内容是文本，具有不同的格式，如强调或图像，是由内联元素构成的。（发件人：）

如果将内联块应用于“nav ul”，则元素将显示为内联

.nav a{
颜色：#5A5A；
字体大小：11px；
字体大小：粗体；
填充：14px 10px；
文本转换：大写；
}
李国荣先生{
显示：内联；
}
美国海军{
显示：内联块；
}
.浮动{
浮动：对；
}

正如您将看到的，float将显示类型更改为

块

，显示方式与内联不同。许多代码似乎丢失了。在旁注中，应该是。@JosefEngelfrost Styles不应该在头部。实际上，在HTML中，您可以向特定元素添加“作用域”样式块，因此它们只适用于文档的特定部分。您只是在问

浮动以及它为什么会这样做，或者您是否也需要一个解决方案？@GolezTrol作为旁注，报告当前唯一支持作用域CSS的浏览器是Firefox。IE的工作计划中根本没有开发这一功能，Chrome将其作为一项实验性功能，但后来将其删除。它现在似乎没有什么支持，而且在未来的版本中也不太有希望。
 <body>
<div class="nav">
  <div class="container">
    <ul>
      <li><a href="#">Name</a></li>
      <li><a href="#">Browse</a></li>
    </ul>
    <ul class="float">
      <li><a href="#">Sign Up</a></li>
      <li><a href="#">Log In</a></li>
      <li><a href="#">Help</a></li>
    </ul>

    <style>

    .nav a {
      color: #5a5a5a;
      font-size: 11px;
      font-weight: bold;
      padding: 14px 10px;
      text-transform: uppercase;
     }

   .nav li {
       display: inline;
      }

   .nav ul {
      display: inline;
     }