html - 带有内联 block 元素的垂直列表 CSS-6ren

html - 带有内联 block 元素的垂直列表 CSS

转载作者：行者123 更新时间：2023-11-28 06:17:21

27

4

请帮我解决这个问题。

我希望红色背景上的列表只显示在一行中。我不明白为什么最后一项要换行。

body {
  background-color: #F0F0F0;
  font: 14px/20px Arial, sans-serif; 
  color: #555;
  margin: 0 auto;
  max-width: 1080px;
}
a {
  color: #FFF;
  text-decoration: none;
  font-weight: bold;
}
a:hover {
  color: #FFF;
  text-decoration: underline;
}
header {
  background-color: #333;
  opacity: 0.90;
  box-sizing: border-box;
  width: 100%;
  height: 86px;
  top: 0;
  left: 0;
}
p#logo {
  float: left;
  color: #FFF;
  margin: 30px;
  font-size: 350%;
}
nav {
  display: table;
  height: 100%;
  background-color: #D50000;
  float: right; 
}
nav ul {
  display: table-cell;
  vertical-align: middle;
  padding-left: 10%;
  padding-right: 10%;
  vertical-align: middle;
  list-style: none;
}
nav ul li {
  float: left;
  padding-left: 3%;
  padding-right: 3%;
}

<body>
  <header>
    <p id="logo">Lago Siu</p>
    <nav>
      <ul>
        <li><a href="#" class="current">Home</a></li>
        <li><a href="#">Menu pranzo</a></li>
        <li><a href="#">Menu cena</a></li>
        <li><a href="#info">Info</a></li>
      </ul>
    </nav>
  </header>
</body>

看了其他类似的问题，还是解决不了问题!

最佳答案

您现在面临的真正痛苦是，您对所有宽度都使用百分比。

这听起来不错，但问题是:
parent 会弄清楚它的内容有多宽，然后设置它的宽度以匹配它的 child ，然后填充的百分比将是该宽度的百分比。如果子元素的填充是基于百分比的(基于每个元素的不同宽度)，那么您的尺寸会发生变化，这意味着父元素需要重新调整其宽度、重新计算等等。

这行不通。
此外，您还会遇到舍入错误，每个浏览器的舍入都略有不同。百分比很好，直到您必须弄清楚它是多少像素。

这甚至不是最外面的盒子有一定百分比的问题； parent 的祖 parent 的 10% 宽度的 5% 意味着如果孙子被四舍五入一个像素， parent 将被四舍五入一个像素，意味着祖 parent 将被四舍五入一个像素......

除非四舍五入相反，在这种情况下，您的孙子的宽度较小，和/或您的 parent 容纳其 child 的空间较小。

与其将自己介绍给那个受伤的世界，我建议如下:

始终在所有内容上使用边框框(使用 * 而不是单独应用它)
非常谨慎地使用边距，并且仅在该行上没有其他任何内容时才用于水平居中
更频繁地使用 display: inline-block;，并在父级上使用 text-align: center|left|right; 来控制内容流
使用 em 和 rem 进行填充，大小相对于您现在所在的小部件中的字体大小 (em ) 或相对于默认字体大小 (rem)；而不是 font-size: 350% 你可以使用 font-size: 3.5rem;
尝试为您的样式使用命名良好的类(在 BEM 或 SuitCSS 或 OOCSS 样式中，如果有帮助的话)，而不是依赖 HTML 选择器或 ID；我之所以这样说，是因为随着页面复杂性的增加，两组 div div div span 发生碰撞(因此很难采用不同的样式)的可能性变得非常高 而 .MediaPlayer-button 与 .CommentSection-submit 发生冲突的几率仍然恰好为 0，只要 CSS 选择器未嵌套。

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
html {
  font: 14px/20px Arial, sans-serif;
}
/* I've moved most of the commonly-repeating housekeeping CSS into utility classes */

.u-floatLeft {
  float: left;
}
.u-floatRight {
  float: right;
}
.u-noMargin {
  margin: 0;
}
.u-inlineBlock {
  display: inline-block;
}
.u-table {
  display: table;
}
.u-tableCell {
  display: table-cell;
}
.u-fullHeight {
  height: 100%;
}
.Header {
  background-color: #333;
  /* by making the height REM-based, the header now updates in relative-size,
     as the base font-size changes, without needing to recalculate */
  height: 6rem;
}
.Logo {
  color: #fff;
  font-size: 3.5rem;
  /* === 350%, but is more idiomatic, as its text-based */
  /* by making the line-height match the parent height,
     the logo-text will align itself properly */
  line-height: 6rem;
  /* I don't need any other margin or padding, now, except to move it right;
     use margin, instead, if the text needed its own background-color */
  padding-left: 0.75em;
}
.HeaderNav {
  background-color: #d50000;
}
.HeaderNav-list {
  /* <ul> and <ol> have a margin and a padding-left by default */
  /* 150% of an EM at this font-size and font-family */
  padding: 0 1.5em;
  vertical-align: middle;
}
.HeaderNav-item {
  /* instead of % of total width, padding is now % of single EM */
  padding: 0 0.2em;
}
.HeaderNav-link {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}
.HeaderNav-link:hover {
  text-decoration: underline;
}
.HeaderNav-link--current {}

<!doctype html>

<html>

<head>
</head>

<body>
  <header class="Header">
    <h1 class="Logo u-floatLeft u-noMargin u-fullHeight">Lago Siu</h1>
    <nav class="HeaderNav u-table u-floatRight u-fullHeight">
      <ul class="HeaderNav-list u-tableCell u-noMargin u-fullHeight">
        <li class="HeaderNav-item u-inlineBlock">
          <a href="#" class="HeaderNav-link HeaderNav-link--current">Home</a>
        </li>
        <li class="HeaderNav-item u-inlineBlock">
          <a href="#" class="HeaderNav-link">Menu pranzo</a>
        </li>
        <li class="HeaderNav-item u-inlineBlock">
          <a href="#" class="HeaderNav-link">Menu cena</a>
        </li>
        <li class="HeaderNav-item u-inlineBlock">
          <a href="#" class="HeaderNav-link">Info</a>
        </li>
      </ul>
    </nav>
  </header>
</body>

</html>

我希望这有助于解决问题，并为正在发生的事情、您将来遇到的问题以及如何解决这些问题提供一些基础。

关于html - 带有内联 block 元素的垂直列表 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35816078/

27

4

0

文章推荐： javascript - 输入字段值并使用 Javascript 进行重定向

文章推荐： c++ - 通过传递的指针访问静态方法内部的非静态成员

文章推荐： javascript - 如何将焦点集中的div居中？ [垂直]

blockly - 在 blockly block 中读取用户输入的输入
我的 blockly.js 文件中有以下代码 Blockly.Blocks['account_number'] = { // Other type. init: function() {
Android将图像分成几 block 并获得等效大小的图像 block ( block )
首先抱歉我的英语不好，我正在开发 Image Splitter 应用程序并且已经完成，但是现在的要求是当图像被分割(分成几 block /chunks)那么图像 block 的每一 block (ch
block - smalltalk block - 我可以显式设置返回值并停止执行 block 吗？
#value: 消息的返回值，当发送到一个 block 时，是该 block 中最后一句话的值。所以 [ 1 + 2. 3 + 4. ] value 计算结果为 7。我发现有时很难使用。有没有办法显式
css - 当一个 block 高于其他 block 时，内联 block 对 block 应用顶部效果
我想构建一个包含 3 div 的响应式导航栏相同的 width和 height . 我申请了 inline-block到每个 block ，我得到一个我不理解的行为。问题是，第三 block 由 2
blockly - Blockly 有文件选择器吗？
我希望使用 Blockly 来允许非技术人员用户指定测试脚本。它的一部分需要一个文件选择器，但是，我看不到 Blockly 有一个。是吗？实际上，我找不到完整的标准 block 列表。谁有网址？
reactjs - 有没有办法在父 block 中知道您正在编辑该父 block 的内部 block ？
仅当您位于父 block 内部时，父 block 的 props.isSelected 才为 true，但当您在该 block 的 innerBlocks 内进行编辑时则不然。如何从父 block
reactjs - 有没有办法在父 block 中知道您正在编辑该父 block 的内部 block ？
仅当您位于父 block 内部时，父 block 的 props.isSelected 才为 true，但当您在该 block 的 innerBlocks 内进行编辑时则不然。如何从父 block
html - 我想创建一个具有不同背景颜色 block 和不同悬停颜色 block 的导航栏 block
我想创建一个具有不同背景颜色 block 和不同悬停颜色 block 的导航栏 block 。我可以分别创建不同的悬停颜色 block 或不同的背景颜色 block ，但不能一起创建。所以请告诉我如何
ios - block 指针变量 'block' 在被 block 捕获时未初始化
我正在使用看到的代码 here定期执行代码: #define DELAY_IN_MS 1000 __block dispatch_time_t next = dispatch_time(DISPATC
ios - 为什么必须复制 block 而不是保留 block ？什么时候不需要复制 block ？
为什么 block 必须被复制而不是保留？两者在引擎盖下有什么区别？在什么情况下不需要复制 block (如果有)？最佳答案通常，当您分配一个类的实例时，它会进入堆并一直存在，直到它被释放。但是，
ios - block block block ，用 __weak self
我想弄清楚我这样做是否正确: 如果我有一个 block ，我会这样做: __weak MyClass *weakSelf = self; [self performBlock:^{
javascript - 当单击部分中的每个 block 时，显示一个 block ，同时使用 jquery 隐藏其他 block 出现第二个 block ，第三个和第四个
我想制作一个 4 block 导航菜单，虽然我已经显示了一个 block ，然后单击打开第二个 block ，从第二个开始选择并再次单击出现第三个 block ，第四个 block 相同...这是我的
java - 最好在 try block 内有一个同步块(synchronized block)，还是在同步块(synchronized block)内有一个 try block ？
例如，这样更好吗？ try { synchronized (bean) { // Write something } } catch (Int
simulation - 尝试检查前方色 block 并根据前方色 block 的色 block 颜色做出决定
我想让一只乌龟检查前方小块的颜色并决定移动到哪里。如果前面的补丁不是白色的，那么乌龟向左或向右旋转并移动。我的 If 决策结构中出现错误，显示“此处应为 TRUE？FALSE，而不是 block 列表
在 block 矩阵的对角部分重复 block 矩阵多次，非对角 block 全部为零矩阵？
我想创建一个 block 对角矩阵，其中对角 block 重复一定次数，非对角 block 都是零矩阵。例如，假设我们从一个矩阵开始: > diag.matrix [,1] [,2] [
blockchain - 如何通过区 block 号访问以太坊区 block 链上一个区 block 的数据？
我是区 block 链新手。突然我有一个问题，我们是否可以通过区 block 号来访问以太坊区 block 链上之前的区 block 数据。例如我创建了一个block1、block2。 block
blockchain - 如何通过区 block 号访问以太坊区 block 链上一个区 block 的数据？
我是区 block 链新手。突然我有一个问题，我们是否可以通过区 block 号来访问以太坊区 block 链上之前的区 block 数据。例如我创建了一个block1、block2。 block
game-engine - 如何在不与其他图 block 重叠的情况下将等距对象从一个图 block 过渡到另一个图 block
我创建了一个等距环境，全部使用 Javascript 和 HTML5 (2D Canvas)，大部分情况下工作正常。我面临的问题是使用不同高度的图 block ，然后对图 block 上的对象索引进行
java - 如果try block 中有 "Where (true)" block ，是否会到达finally block ？
这是令我困惑的代码: public Integer getInteger(BlockingQueue queue) { boolean interrupted = false; try
c# - TPL 数据流转换 block 发布到批处理 block ，然后是操作 block
我有一个基于 TPL 数据流的应用程序，它仅使用批处理 block 和操作 block 就可以正常工作。我已经添加了一个 TransformBlock 以尝试在发布到批处理 block 之前从源中转

首页

博学

6Ren·AI

商城

html - 带有内联 block 元素的垂直列表 CSS