html - 使用浮动元素的三列标题

Question

标题应该是什么样子

这就是标题的样子。

它目前的样子

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

当前标题代码

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

我试图居中h1，将徽标完全浮动到左侧，并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://...协议。

第三：您不能ul用作ul. 里面只li允许 sul

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

Answer 2

以下剂量对您有帮助吗？它的设计使得高度是恒定的。

<div style='position:relative; padding:0px 200px 0px 200px; background-color:gray;height:20px;box-sizing:border-box;'>
    <div style='position:absolute;background-color:yellow; left:0px; top:0px; height:100%;width:200px;'>
        left pannel
    </div>
    <div style='position:absolute;background-color:yellow; right:0px; top:0px; height:100%; width:200px;'>
        right pannel.
    </div>
    <div style='box-sizing:border-box;width:100%;text-align:center;'>
        Center
    </div>
</div>

你也可以在这里看到。