Question

我需要使用H1，UL菜单和H2制作响应式标题。 H1 - 从左角开始约5％。 H2 - 从右角约5％。它们之间是UL菜单，我需要放在中心。一条线上的所有东西......以及此线下的HR线。如何在CENTER中定位UL菜单？

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和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; }

Here's a jsFiddle demo.

使用CSS进行H1，UI和H2内联定位

1 个答案: