html - 使用 float 元素的三列标题

Question

标题应该是什么样子

标题应该是这样的。

目前的样子

如您所见，我的标题看起来不太好...我似乎遇到了一些 float 问题。

当前标题代码

这是我用来生成标题的 HMTL。

我正在尝试将 h1 居中，将 Logo 完全 float 到左侧，并在 Logo 旁边显示 h2。发布日期和发布者没问题。

<header>
    <ul style="list-style-type:none;float:right;">
      <li style="float:left;">
        <img src="C:\Logo.jpg" alt="Logo"/>
      </li>
      <li style="float:left;">
        <h2>Statuts de Production</h2>
      </li>
      <li style="float:right;">
        <h1 style="margin-bottom:0px">Machines en cours d'assemblage</h1>
      </li>
      <ul style="list-style-type:none;float:right;">
        <li>
          Dernière mise à jour: <xsl:value-of select="Table/Publish/DateEntry"/>
        </li>
        <li>
          Par: <xsl:value-of select="Table/Publish/Username"/>
        </li>
      </ul>
    </ul>
  </header>

我没有使用正确的方法吗？我应该使用表格而不是无序列表吗？

Answer 1

如果您想要垂直对齐列表项并缩进中间项，只需从 HTML 中删除样式并使用此外部 CSS(使用外部 CSS 是第一改善您的方法的事情) :

ul { display: block; list-style-type:none; height: 50px;  }
li { display: inline-block; vertical-align: middle; }
ul ul { display: inline-block; }
ul ul li { display: block; }

并根据需要为每个列表项设置内边距，第三项可能会向右浮动。

第二:您不能使用硬盘上的图像路径C:\Logo.jpg 来启用客户端访问，使用http://... 协议(protocol)。

第三:您不能将ul 用作ul 的直接子代。 ul

中只允许使用 li

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>
    <ul>
      <li>subitem 1</li>
      <li>subitem 2</li>
    </ul>
  </li>
</ul>