gpt4 book ai didi

html - 样式化 Html css nav 时如何对齐引用?

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

我正在设计我自己的导航,我需要将关于和操作与左侧对齐。但是电话、用户名和现金是靠右对齐的。我怎样才能做到这一点?

.header {
margin: 0;
text-align: left;
color: white;
}
.my-header{
background-color: #003399;
}
.header li, form { display: inline; }

.header-normal li a{
text-decoration: none;
padding-right: 10px;
padding-left: 5px;
color: white;
font-size: 14pt;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
.normal li a:hover{
color: #ff6699;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="menu_laba3.css">
</head>
<body>
<div class="my-header">
<ul class="header-normal header">
<li><a href="#">About</a></li>
<li><a href="#">Actions</a></li>
<li> Telephone: +375293326369 </li>
<li><a href="#"> username </a> </li>
<li> 500$ </li>

</ul>
</div>
</body>
</html>

最佳答案

(稍作编辑)

将此添加到您的 CSS:

.header-normal {
display: flex;
align-items: baseline;
}
ul.header-normal li:nth-child(3) {
margin-left: auto;
}

它将菜单 ul 视为 flex 容器,将元素垂直对齐到基线。第三个列表项上的 margin-left: auto 将导致从那里开始的所有内容都向右对齐。

.header {
margin: 0;
text-align: left;
color: white;
}
.header-normal {
display: flex;
align-items: baseline;
}
ul.header-normal li:nth-child(3) {
margin-left: auto;
}

.my-header{
background-color: #003399;
}
.header li, form { display: inline; }

.header-normal li a{
text-decoration: none;
padding-right: 10px;
padding-left: 5px;
color: white;
font-size: 14pt;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
.normal li a:hover{
color: #ff6699;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="menu_laba3.css">
</head>
<body>
<div class="my-header">
<ul class="header-normal header">
<li><a href="#">About</a></li>
<li><a href="#">Actions</a></li>
<li> Telephone: +375293326369 </li>
<li><a href="#"> username </a> </li>
<li> 500$ </li>

</ul>
</div>
</body>
</html>

关于html - 样式化 Html css nav 时如何对齐引用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37898069/

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