Question

我正在尝试创建以下设计

左侧是图片，后跟带有单词的标签。

右侧的

是菜单选项，看起来应该是可单击的。分隔它们的斜线永远不会改变颜色等。但是，“关于”，“联系方式”和“未来”将最终停留在不同的外观，并将带您进入网站的不同页面。

因此，当我尝试创建此代码时，我编写了以下HTML和CSS（运行时请确保窗口很宽）

.modernShadow {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.fittingObject {
    max-width: 100%;
    max-height: 100%;
}

#topdiv {
    position: fixed;
    z-index: 2;
    background-color: #4FBEA9;
    width: 100%;
    height: 44pt;
    padding-top: 3pt;
    padding-bottom: 3pt;
    padding-left: 3pt;
    padding-right: 3pt;
}

#topdiv * {
    display: inline;
    vertical-align: middle;
}

.title {}

.titleLogo {}

.titleHere {
    color: white;
}

.rightList {
  float:right;
  vertical-align: middle;
}

<header>
    <!-- Displays in tab bar -->
    <title>Logo Here</title>

    <div id="topdiv" class="modernShadow">
        <img src="https://cdn1.iconfinder.com/data/icons/computer-system-files-essential-glyph/48/Sed-40-512.png" class="fittingObject" />
        <h1 class="title">
            <h1 class="titleLogo">Logo</h1>
            <h1 class="titleHere">Here</h1>
        </h1>
        <nav class="rightList">
            <ul>About</ul>
            /
            <ul>Contact</ul>
            /
            <ul>The Future</ul>
        </nav>
    </div>
</header>

结果就是这个

我无法解释原因，因为我不了解这种方式正在发生什么。

为什么float：right下的组件不像其他所有组件那样垂直对齐？我相信#topdiv *为每个子组件提供了样式vertical-align: center，所以为什么不发挥作用呢？
单词和“ /”字之间的空格在哪里？
我不确定“ Logo Here”在垂直居中出现不是偶然现象，也许这只是字体大小？但这是由.fittingObject CSS设置的。（标题徽标应尽可能大）

最终目标实质上是上面的图片。正确项目的字体大小是可变的，并且文本应始终始终在包含div的内部垂直居中。

Answer 1

答案：

浮动不支持垂直对齐，请在此处详细了解； CSS Vertical align does not work with float
UL具有属性padding-inline-start，该属性的默认值为40px，并向右推送内容。
“最大宽度”和“最大高度”属性仅指定特定元素的限制，而并不表示其实际宽度和高度值。

我修改了您的html以包含包装div；左右两类。在右边的div中，我放置了您的rightList，它具有line-height css属性，并且是vertical-align:middle的替代方法。

.modernShadow {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.fittingObject {
  max-width: 100%;
  max-height: 100%;
}

#topdiv {
  position: fixed;
  z-index: 2;
  background-color: #4FBEA9;
  width: 100%;
  height: 44pt;
  padding-top: 3pt;
  padding-bottom: 3pt;
  padding-left: 3pt;
  padding-right: 3pt;
}

#topdiv * {
  display: inline;
  vertical-align: middle;
}

.title {}

.titleLogo {}

.titleHere {
  color: white;
}

.left,
.right {
  width: 49%;
  display: inline-block;
}

.rightList {
  width:230px;
  float: right;
  line-height: 60px;
}

.rightList ul {
  padding-inline-start: 0px;
}

<header>
  <!-- Displays in tab bar -->
  <title>Logo Here</title>

  <div id="topdiv" class="modernShadow">

    <div class="left">
      <img src="https://cdn1.iconfinder.com/data/icons/computer-system-files-essential-glyph/48/Sed-40-512.png" class="fittingObject" />
      <h1 class="title">
        <h1 class="titleLogo">Logo</h1>
        <h1 class="titleHere">Here</h1>
      </h1>
    </div>

    <div class="right">
      <nav class="rightList">
        <ul>About</ul>
        /
        <ul>Contact</ul>
        /
        <ul>The Future</ul>
      </nav>
    </div>
  </div>
</header>

Answer 2

您是否有特定的理由对所有导航使用<ul>？

如果您使用

<ul> <li>About</li> / <li>Contact</li> / <li>The Future</li> </ul>

它将根据需要生成显示。

<ul>具有默认的用户代理样式表。

对于垂直居中的文本，如果您已经设置了块的高度，则始终可以对行高使用相同的语句（在本例中为44pt）使其垂直居中。

标题栏中的右侧项目未垂直居中。 float：right'ed项目似乎不继承* ed属性

2 个答案: