gpt4 book ai didi

html - 需要帮助修复导航栏,特别是 Inline-Block

转载 作者:行者123 更新时间:2023-11-28 02:10:33 25 4
gpt4 key购买 nike

我无法让列表元素到达我想要的位置:

我希望第一个列表 $row[1] 放在中间,Logout 列表项放在右 Angular 。我知道有人会因为我使用通用字符 (*) 对我大喊大叫,但我所有的字体都是一样的,所以没关系。

* {
font-family: "Verdana", Sans-serif;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
vertical-align: baseline;
}

#nav {
position: absolute;
top: 50px;
/*Change as needed*/
right: 0;
}

li {
color: white;
text-align: center;
text-decoration: none;
padding: 4px;
padding-top: 0;
display: inline-block;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<header>
<div id="nav">
<ul>
<li>
<a href="">
<h3>
<?=$row[1]?>
</h3>
</a>
</li>
<li>
<a href="">
<h3><span class="glyphicon glyphicon-log-out"></span> Log out</h3>
</a>
</li>
</ul>
</div>
</header>

<body>

</body>

最佳答案

因为您已经在使用 Bootstrap,所以您不需要添加外部 css 来进行您可以使用的微不足道的调整

<div class="col-md-2 col-md-offset-5"></div>

因此,您应该将调整添加到 <li>标签

    <div id="nav"> 
<ul>
<li class="col-md-2 col-md-offset-5"><a href=""><h3 ><?=$row[1]?></h3></a></li>
<li class= pull-right><a href=""><h3><span class="glyphicon glyphicon-log-out"></span> Log out</h3></a></li>
</ul>
</div>

抱歉格式错误,在手机上完成

关于html - 需要帮助修复导航栏,特别是 Inline-Block,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48778013/

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