将导航条设置在右边
将导航条设置在右边
提问于 2022-11-02 10:06:22
所以我试着模仿谷歌搜索页面。我想把肚脐移到右上角。那就是“图像和高级搜索”按钮。
它总是从左上角开始，我明白。但是当我在CSS中使用'float: right‘时，它会移动到右边，然后下降到更低的位置，与google的徽标图像保持一致。我要它保持右上角。
我还不能发布图片，因为我的声誉评分。
.nav {
padding: 10px;
margin-right: 25px;
float: right;
}
.logo {
padding: 20px;
margin-top: 100px;
margin-left: auto;
margin-right: auto;
width: 30%;
}<nav class="nav">
<div class="index">
<a href="image.html">Images</a>
</div>
<a href="advanced.html">Advanced search</a>
</nav>
<div class="logo">
<img src="https://placekitten.com/50/50" alt="Google search">
</div>
我试过用浮子:对。它移动肚脐向右，但也与标志，而不是右上角。我试着用空白处
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-11-02 10:27:05
我没有使用float，而是写道：
position: absolute;
right: 0px;
top: 0px;nav固定在右上角。我想这就是你想要的。
.nav {
position: absolute;
padding: 10px;
right: 0px;
/* change back to 25px if you want */
top: 0px;
}
.logo {
width: 30%;
padding: 20px;
margin-top: 100px;
margin-left: auto;
margin-right: auto;
}<nav class="nav">
<div class="index">
<a href="image.html">Images</a>
</div>
<a href="advanced.html">Advanced search</a>
</nav>
<div class="logo">
<img src="google logo.png" alt="Google search">
</div>
Stack Overflow用户
发布于 2022-11-02 10:30:33
更改Html代码
<div class="mainDiv"
<nav class="nav">
<div class="index">
<a href="image.html">Images</a>
</div>
<a href="advanced.html">Advanced search</a>
</nav>
<div class="logo">
<img src="google logo.png" alt="Google search">
</div>
</div>更改CSS
.mainDiv{
width: 100%;
}
.nav {
padding: 10px;
margin-right: 25px;
float: right;
}
.logo {
padding: 20px;
margin-left: auto;
margin-right: auto;
width:30%;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74287446
复制相关文章
相似问题
腾讯云开发者
