使用浮动元素的三列标题

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

给你以下帮助吗？它被设计成高度恒定。

<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>

您也可以看到here。

Answer 2

如果要垂直对齐列表项并缩进中间项，只需从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; }

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

第二：您无法使用HDD C:\Logo.jpg上的图片路径启用客户端访问，请使用http://...协议。

第三：您不能将ul用作ul的直接子项。 li

中只允许ul次

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