H1, Ul和H2的CSS内嵌定位

Question

我需要使H1, UL菜单和H2响应头。H1 -从左下角大约5%。右下角的H2 - 5%左右。它们之间是UL菜单，我需要把它放在中间。所有的东西都在一行…HR线在这条线下面。如何在中心位置放置UL菜单?

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

您可以使用浮动的div s和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; }