所以我試圖模仿谷歌的搜索頁面。我想將導航欄從右上角開始。這就是“影像和高級搜索”按鈕。
它總是從我理解的左上角開始。但是當我在 CSS 中使用 'float:right' 時，它會向右移動，但隨后會下降到與谷歌徽標影像行內。我希望它保持在右上角。
由于我的聲譽得分，我還不能發布圖片。
.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>我嘗試使用 float: 對。它將導航欄向右移動，但也與徽標行內，而不是右上角。我嘗試使用邊距
uj5u.com熱心網友回復：
而不是使用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>uj5u.com熱心網友回復：
更改 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%;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/525677.html
上一篇：如何洗掉此API注入表中的一行？
下一篇：懸停顯示元素