Html 使用CSS垂直对齐两个不同字体大小的文本
在我的页面顶部,我希望页面标题与屏幕左侧对齐,并在屏幕右侧对齐一个简短的导航菜单。我可以使用float实现这一点,但这两个元素有不同的基线,即文本的基线看起来不同。有没有什么方法可以使用css来实现这一点?我有一个关于我试图在JSFIDLE上做什么的示例,首先我建议使用Html 使用CSS垂直对齐两个不同字体大小的文本,html,css,fonts,alignment,Html,Css,Fonts,Alignment,在我的页面顶部,我希望页面标题与屏幕左侧对齐,并在屏幕右侧对齐一个简短的导航菜单。我可以使用float实现这一点,但这两个元素有不同的基线,即文本的基线看起来不同。有没有什么方法可以使用css来实现这一点?我有一个关于我试图在JSFIDLE上做什么的示例,首先我建议使用ul来包装链接,而不是h3,这种结构没有意义。然后我会在ul中添加一些填充。下面是一个已清理的标记示例: <article > <header> <h1>This is Title<
ul
来包装链接,而不是h3
,这种结构没有意义。然后我会在ul
中添加一些填充。下面是一个已清理的标记示例:
<article >
<header>
<h1>This is Title</h1>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Works</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
<div class="clr"></div>
</header>
</article>
Fiddle:您好,您可以在h1中使用display:inline块
或者看小提琴:-CSS不允许//单行注释。它弄乱了你的头div{}样式。你还有一个问题,头div{…}样式被应用到clear div,导致它不能正常工作。我会在标题div中添加一个id,这样你就可以只针对该div了。您好,谢谢您指出这些错误,谢谢您的建议,但是使用这种方法,导航菜单与标题的中心对齐,而我希望它与底部对齐,感谢您的建议,但使用这种方法,导航菜单与标题的中心对齐,而我希望它与底部对齐。我将链接包装在h3中,因为它们使用这种样式,在列表项中添加似乎是多余的
body {
font-family:"Verdana", Verdana, sans-serif;
font-size: 1em;
font-weight:400;
}
h1 {
font-family:"Century Gothic", Verdana, sans-serif;
font-size: 4em;
font-weight:400;
float: left;
margin-left:10px;
}
header nav {
margin-right: 10px;
float: right;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 2em 0 0 0;
}
nav ul li {
display: inline;
font-size: 1.2em;
font-weight:400;
}
nav a {
padding: 0 1em;
border-right: 1px solid #000;
}
nav li:last-child a {
padding-right: 0;
border-right: none;
}
.clr {clear:both;}