0

H1、UL メニュー、H2 でレスポンシブ ヘッダーを作成する必要があります。H1 - 左隅から約 5%。H2 - 右隅から約 5%。それらの間にあるのは、中央に配置する必要がある UL メニューです。すべてを 1 行に…そしてこの行の下に 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;
}
4

1 に答える 1

2

divこれを実現するために floatedとを使用できます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 のデモです。

于 2013-05-29T12:14:11.890 に答える