gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 04:33:34 25 4
gpt4 key购买 nike

我需要使用 H1、UL 菜单和 H2 制作响应式标题。H1 - 距左 Angular 约 5%。 H2 - 距右 Angular 约 5%。在它们之间是 UL 菜单,我需要将它放在中间。一切都在一行中......这条线下的人力资源线。如何将 UL 菜单置于 CENTER 中?

jsFiddle EXAMPLE

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

最佳答案

您可以使用 float 的 divtext-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 - 使用 CSS 的 H1、Ul 和 H2 内联定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16813289/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com