css - 使用 CSS 进行 H1、Ul 和 H2 内联定位

Question

我需要用 H1、UL 菜单和 H2 制作响应式标题。H1 - 距左下角约 5%。H2 - 距离右上角约 5%。它们之间是 UL 菜单，我需要将其放置在中间。一切都在一条线上……而这条线下的人力资源线。如何将 UL 菜单定位在 CENTER 中？

jsFiddle 示例

HTML：

<div class="container">
    <header class="clearfix">
            <!-- TITLE 1 -->
            <h1>Title 1 </h1>
            <!-- UL -->
            <ul>
                <li> menu 1</li>
                <li> menu 2</li>
                <li> menu 3</li>
            </ul>
            <!-- TITLE 2 -->
            <h2>Title 2 <br/><span>span</span></h2>

        <hr />
    </header>
</div>

CSS：

.container > header {
    width: 90%;
    margin: 0 auto;
    position: relative;
    padding: 40px 30px 20px 30px;
}
.container > header h1 {
    padding-left: 5px;
    font-size: 30px;
    line-height: 37px;
    margin: 0 auto;
    font-weight: 700;
    color: #000;
    display:inline !important;
    float: left;
}
.container > header h2 {
    padding-right: 5px;
    font-size: 14px;
    line-height: 14px;
    margin: 0px 0px 0px auto;
    font-weight: 700;
    color: #000;
    display:inline !important;
    float: right;
    text-align: right;
}
.container > header h2 span {
    font-size: 10px;
    line-height: 11px;
    font-weight: 700;
    color: #000;
}
.container > header ul {
    font-size: 10px;
    line-height: 11px;
    font-weight: 700;
    color: red;
}
.container > header ul li {
    float: left;
    list-style-type: none;
    padding: 0px 5px 0px 5px;
}
.container > header hr {
    border:0;
    color:#000;
    background:#000;
    height:1px;
    clear: both;
}

Answer 1

您可以使用 floateddiv并text-align实现此目的。这是HTML：

<header>
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right">Right</div>
</header>

以及正确对齐它们的 CSS：

.left { float: left; width: 25% }
.center { float: left; width: 50%; text-align: center; }
.right { float: left; width: 25%; text-align: right; }

这是一个 jsFiddle 演示。