gpt4 book ai didi

html - 如何在一行中进行多个对齐?

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

我有一个用作导航栏的按钮表,它位于我的页面的中心。

我想将我的 Logo 直接放在表格的左侧,或者一直 float 到页面的左侧。但是, Logo 的存在会影响我的导航栏,使我的导航栏不再居中。

有什么办法可以在一行中进行多个对齐?我的 Logo 是否左对齐,导航栏是否居中于页面?

我对代码还很陌生,所以我也很感激任何其他提示和建议。

html {
background-color: #305a5c;
text-align: center;
font-family: "Kelly Slab", Monospace;
font-size: 24px;
}

/* top */
header {
overflow: hidden;
background-color: #0D282A;
padding: 0px;
margin: -8px;
}

.nav {
position: relative;
margin: auto;
}

.logo {
height: 150px;
}

.nav a {
text-decoration: none;
color: #FFFFFF;
filter: grayscale(.8);
}

.nav a:hover {
filter: grayscale(0);
text-shadow: 1px 1px rgb(69, 69, 69);
}

/* nav bar buttons */
.nav-about {
background-image: url(https://66.media.tumblr.com/ab95b7b5602ea34655eeb3ec4dcc4ed8/tumblr_pz6lc97U0K1v1yf1ao1_250.png);
background-position: center;
display:block;
padding: 20px;
background-repeat: no-repeat;
}

.nav-b-f {
background-image: url(https://66.media.tumblr.com/f12e97ce99afa0b33426401ff86f4a8d/tumblr_pz6lc97U0K1v1yf1ao9_r1_250.png);
background-position: center;
display:block;
padding: 20px;
background-repeat: no-repeat;
}

.nav-commission {
background-image: url(https://66.media.tumblr.com/2a8d52f5d1745d2feb9148696ad617ff/tumblr_pz6lc97U0K1v1yf1ao4_r1_250.png);
background-position: center;
display:block;
padding: 20px;
background-repeat: no-repeat;
}

.nav-gallery {
background-image: url(https://66.media.tumblr.com/d24fe4e4e21ca1bb03f8a036f3c31813/tumblr_pz6lc97U0K1v1yf1ao6_r1_250.png);
background-position: center;
display:block;
padding: 20px;
background-repeat: no-repeat;
}

.nav-characters {
background-image: url(https://66.media.tumblr.com/996d587c1f1ac3e30cbb199fe0fde939/tumblr_pz6lc97U0K1v1yf1ao3_250.png);
background-position: center;
display:block;
padding: 20px;
background-repeat: no-repeat;
}

.nav-queue {
background-image: url(https://66.media.tumblr.com/3b75f06c8be0f9156e1ba80269a06f05/tumblr_pz6lc97U0K1v1yf1ao7_250.png);
background-position: center;
display:block;
padding: 20px;
background-repeat: no-repeat;
}

.nav-tos {
background-image: url(https://66.media.tumblr.com/32bb677ea2343351074b563cdde3bf47/tumblr_pz6lc97U0K1v1yf1ao8_250.png);
background-position: center;
display:block;
padding: 20px 0px 20px 0px;
background-repeat: no-repeat;
}

.nav-contact {
background-image: url(https://66.media.tumblr.com/a4bbf4f8b1cc7f592c5b4897d62f2d9c/tumblr_pz6lc97U0K1v1yf1ao5_250.png);
background-position: center;
display:block;
padding: 20px;
background-repeat: no-repeat;
}
<!doctype html>

<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Kelly+Slab&display=swap" rel="stylesheet">
<html lang="en">
<title>KLUDGE'S ART</title>

<!-- nav bar -->
<header>
<a href="http://kludges.art"><img class="logo" src="https://66.media.tumblr.com/14455a8b8cb4f6151aa46ecee052bf6f/7600395af9cd6f59-40/s250x400/085278c95d13a8ea01beaf03fb019c3a95297985.png" align="left" alt="Kludge's Art logo"></a>

<nav>
<table class="nav" align="center">
<col width="200px">
<col width="200px">
<col width="200px">
<col width="200px">
<tr>
<td><a class="nav-about" href="http://kludges.art">About</a></td>
<td><a class="nav-b-f" href="http://kludges.art/buoy-friend">B-F</a></td>
<td><a class="nav-commission" href="http://kludges.art/commission">Commission</a></td>
<td><a class="nav-gallery" href="http://kludges.art/gallery">Gallery</a></td>
</tr>
<tr><td><a class="nav-characters" href="http://kludges.art/characters">Characters</a></td>
<td><a class="nav-queue" href="http://kludges.art/queue">Queue</a></td>
<td><a class="nav-tos" href="http://kludges.art/terms-of-service">Terms of Service</a></td>
<td><a class="nav-contact" href="http://kludges.art/contact">Contact</a></td>
</tr></table>
</nav>

</header>

最佳答案

您可以将 position: absolute;left: 0; 应用于 .logo,这会将其从任何位置计算中剔除为其 sibling 并将其定位在最左侧,并将 margin: 0 auto 设置到导航栏,这将使它居中。但在这种情况下,您还必须为较小的屏幕找到另一种解决方案(在媒体查询中),其中 Logo 不适合居中的导航栏旁边,而是与其重叠/被它覆盖。

(您必须以全屏模式打开下面的代码片段才能看到正确的结果)

<!doctype html>
<style>
html {
background-color: #305a5c;
text-align: center;
font-family: "Kelly Slab", Monospace;
font-size: 24px;
}

/* top */
header {
overflow: hidden;
background-color: #0D282A;
padding: 0px;
margin: -8px;
}

.nav {
position: relative;
margin: 0 auto;
}

.logo {
height: 150px;
position: absolute;
left: 0;
}

.nav a {
text-decoration: none;
color: #FFFFFF;
filter: grayscale(.8);
}

.nav a:hover {
filter: grayscale(0);
text-shadow: 1px 1px rgb(69, 69, 69);
}

/* nav bar buttons */
.nav-about {
background-image: url(https://66.media.tumblr.com/ab95b7b5602ea34655eeb3ec4dcc4ed8/tumblr_pz6lc97U0K1v1yf1ao1_250.png);
background-position: center;
display:block;
padding: 20px;
background-repeat: no-repeat;
}

.nav-b-f {
background-image: url(https://66.media.tumblr.com/f12e97ce99afa0b33426401ff86f4a8d/tumblr_pz6lc97U0K1v1yf1ao9_r1_250.png);
background-position: center;
display:block;
padding: 20px;
background-repeat: no-repeat;
}

.nav-commission {
background-image: url(https://66.media.tumblr.com/2a8d52f5d1745d2feb9148696ad617ff/tumblr_pz6lc97U0K1v1yf1ao4_r1_250.png);
background-position: center;
display:block;
padding: 20px;
background-repeat: no-repeat;
}

.nav-gallery {
background-image: url(https://66.media.tumblr.com/d24fe4e4e21ca1bb03f8a036f3c31813/tumblr_pz6lc97U0K1v1yf1ao6_r1_250.png);
background-position: center;
display:block;
padding: 20px;
background-repeat: no-repeat;
}

.nav-characters {
background-image: url(https://66.media.tumblr.com/996d587c1f1ac3e30cbb199fe0fde939/tumblr_pz6lc97U0K1v1yf1ao3_250.png);
background-position: center;
display:block;
padding: 20px;
background-repeat: no-repeat;
}

.nav-queue {
background-image: url(https://66.media.tumblr.com/3b75f06c8be0f9156e1ba80269a06f05/tumblr_pz6lc97U0K1v1yf1ao7_250.png);
background-position: center;
display:block;
padding: 20px;
background-repeat: no-repeat;
}

.nav-tos {
background-image: url(https://66.media.tumblr.com/32bb677ea2343351074b563cdde3bf47/tumblr_pz6lc97U0K1v1yf1ao8_250.png);
background-position: center;
display:block;
padding: 20px 0px 20px 0px;
background-repeat: no-repeat;
}

.nav-contact {
background-image: url(https://66.media.tumblr.com/a4bbf4f8b1cc7f592c5b4897d62f2d9c/tumblr_pz6lc97U0K1v1yf1ao5_250.png);
background-position: center;
display:block;
padding: 20px;
background-repeat: no-repeat;
}

</style>

<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Kelly+Slab&display=swap" rel="stylesheet">
<html lang="en">
<title>KLUDGE'S ART</title>

<!-- nav bar -->
<header>
<a href="http://kludges.art"><img class="logo" src="https://66.media.tumblr.com/14455a8b8cb4f6151aa46ecee052bf6f/7600395af9cd6f59-40/s250x400/085278c95d13a8ea01beaf03fb019c3a95297985.png" align="left" alt="Kludge's Art logo"></a>

<nav>
<table class="nav">
<col width="200px">
<col width="200px">
<col width="200px">
<col width="200px">
<tr>
<td><a class="nav-about" href="http://kludges.art">About</a></td>
<td><a class="nav-b-f" href="http://kludges.art/buoy-friend">B-F</a></td>
<td><a class="nav-commission" href="http://kludges.art/commission">Commission</a></td>
<td><a class="nav-gallery" href="http://kludges.art/gallery">Gallery</a></td>
</tr>
<tr><td><a class="nav-characters" href="http://kludges.art/characters">Characters</a></td>
<td><a class="nav-queue" href="http://kludges.art/queue">Queue</a></td>
<td><a class="nav-tos" href="http://kludges.art/terms-of-service">Terms of Service</a></td>
<td><a class="nav-contact" href="http://kludges.art/contact">Contact</a></td>
</tr></table>
</nav>

</header>```

关于html - 如何在一行中进行多个对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59462860/

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