Html 如何在一条直线上有多条路线？

我有一个按钮表作为我的导航栏，它位于我的页面中心

我想把我的标志要么直接放在桌子的左边，要么一直飘到页面的左边。但是，徽标的存在会影响我的导航栏，使导航栏不再居中

有没有办法在一条线上有多条路线？我的徽标是否左对齐，导航栏是否居中于页面中心

我对代码相当陌生，所以我也很感激其他的提示和建议

html{
背景色：#305a5c；
文本对齐：居中；
字体系列：“方钻杆板”，单空格；
字体大小：24px；
}
/*顶*/
标题{
溢出：隐藏；
背景色：0D282A；
填充：0px；
利润率：-8px；
}
.导航{
位置：相对位置；
保证金：自动；
}
.标志{
高度：150像素；
}
.导航a{
文字装饰：无；
颜色：#FFFFFF；
过滤器：灰度（.8）；
}
.导航a:悬停{
过滤器：灰度（0）；
文本阴影：1px1pRGB（69,69,69）；
}
/*导航栏按钮*/
.导航{
背景图片：url(https://66.media.tumblr.com/ab95b7b5602ea34655eeb3ec4dcc4ed8/tumblr_pz6lc97U0K1v1yf1ao1_250.png);
背景位置：中心；
显示：块；
填充：20px；
背景重复：无重复；
}
.nav-b-f{
背景图片：url(https://66.media.tumblr.com/f12e97ce99afa0b33426401ff86f4a8d/tumblr_pz6lc97U0K1v1yf1ao9_r1_250.png);
背景位置：中心；
显示：块；
填充：20px；
背景重复：无重复；
}
.导航委员会{
背景图片：url(https://66.media.tumblr.com/2a8d52f5d1745d2feb9148696ad617ff/tumblr_pz6lc97U0K1v1yf1ao4_r1_250.png);
背景位置：中心；
显示：块；
填充：20px；
背景重复：无重复；
}
.导航廊{
背景图片：url(https://66.media.tumblr.com/d24fe4e4e21ca1bb03f8a036f3c31813/tumblr_pz6lc97U0K1v1yf1ao6_r1_250.png);
背景位置：中心；
显示：块；
填充：20px；
背景重复：无重复；
}
.导航字符{
背景图片：url(https://66.media.tumblr.com/996d587c1f1ac3e30cbb199fe0fde939/tumblr_pz6lc97U0K1v1yf1ao3_250.png);
背景位置：中心；
显示：块；
填充：20px；
背景重复：无重复；
}
.导航队列{
背景图片：url(https://66.media.tumblr.com/3b75f06c8be0f9156e1ba80269a06f05/tumblr_pz6lc97U0K1v1yf1ao7_250.png);
背景位置：中心；
显示：块；
填充：20px；
背景重复：无重复；
}
.nav tos{
背景图片：url(https://66.media.tumblr.com/32bb677ea2343351074b563cdde3bf47/tumblr_pz6lc97U0K1v1yf1ao8_250.png);
背景位置：中心；
显示：块；
填充：20px 0px 20px 0px；
背景重复：无重复；
}
.导航联络{
背景图片：url(https://66.media.tumblr.com/a4bbf4f8b1cc7f592c5b4897d62f2d9c/tumblr_pz6lc97U0K1v1yf1ao5_250.png);
背景位置：中心；
显示：块；
填充：20px；
背景重复：无重复；
}

克鲁奇的艺术

您可以尝试使用

float

属性：

---

您可以应用

位置：绝对和
左：0到
.logo
，这将使其脱离其同级的任何位置计算，并将其定位在最左侧；而
边距：0 auto
到导航栏，这将使其居中。但在这种情况下，您还必须为较小的屏幕找到另一种解决方案（在媒体查询中），其中徽标不会位于居中导航栏旁边，而是重叠/被其覆盖

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



html{
背景色：#305a5c；
文本对齐：居中；
字体系列：“方钻杆板”，单空格；
字体大小：24px；
}
/*顶*/
标题{
溢出：隐藏；
背景色：0D282A；
填充：0px；
利润率：-8px；
}
.导航{
位置：相对位置；
保证金：0自动；
}
.标志{
高度：150像素；
位置：绝对位置；
左：0；
}
.导航a{
文字装饰：无；
颜色：#FFFFFF；
过滤器：灰度（.8）；
}
.导航a:悬停{
过滤器：灰度（0）；
文本阴影：1px1pRGB（69,69,69）；
}
/*导航栏按钮*/
.导航{
背景图片：url(https://66.media.tumblr.com/ab95b7b5602ea34655eeb3ec4dcc4ed8/tumblr_pz6lc97U0K1v1yf1ao1_250.png);
背景位置：中心；
显示：块；
填充：20px；
背景重复：无重复；
}
.nav-b-f{
背景图片：url(https://66.media.tumblr.com/f12e97ce99afa0b33426401ff86f4a8d/tumblr_pz6lc97U0K1v1yf1ao9_r1_250.png);
背景位置：中心；
显示：块；
填充：20px；
背景重复：无重复；
}
.导航委员会{
背景图片：url(https://66.media.tumblr.com/2a8d52f5d1745d2feb9148696ad617ff/tumblr_pz6lc97U0K1v1yf1ao4_r1_250.png);
背景位置：中心；
显示：块；
填充：20px；
背景重复：无重复；
}
.导航廊{
背景图片：url(https://66.media.tumblr.com/d24fe4e4e21ca1bb03f8a036f3c31813/tumblr_pz6lc97U0K1v1yf1ao6_r1_250.png);
背景位置：中心；
显示：块；
填充：20px；
背景重复：无重复；
}
.导航字符{
背景图片：url(https://66.media.tumblr.com/996d587c1f1ac3e30cbb199fe0fde939/tumblr_pz6lc97U0K1v1yf1ao3_250.png);
背景位置：中心；
显示：块；
填充：20px；
背景重复：无重复；
}
.导航队列{
背景图片：url(https://66.media.tumblr.com/3b75f06c8be0f9156e1ba80269a06f05/tumblr_pz6lc97U0K1v1yf1ao7_250.png);
背景位置：中心；
显示：块；
填充：20px；
背景重复：无重复；
}
.nav tos{
背景图片：url(https://66.media.tumblr.com/32bb677ea2343351074b563cdde3bf47/tumblr_pz6lc97U0K1v1yf1ao8_250.png);
背景位置：中心；
显示：块；
填充：20px 0px 20px 0px；
背景重复：无重复；
}
.导航联络{
背景图片：url(https://66.med
<header>
<a class="header-logo" 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>

html {
    background-color: #305a5c;
    text-align: center;
    font-family: "Kelly Slab", Monospace;
    font-size: 24px;
}
body{
  margin: 0;
  padding: 0;
}
/* top */
header {
    overflow: hidden;
    background-color: #0D282A;
    padding: 0px;
    position: relative;
    /*margin: -8px;*/
}
.header-logo{
  left: 0;
  position: absolute;
  top: 0;
  z-index: 1;
}
.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;
}

@media (max-width: 1023px){
  header{
    display: flex;
    flex-wrap: wrap;
  }
  .header-logo{
    position: static;
  }
  nav{
    overflow-x: auto;
  }
  table.nav{
    margin-bottom: 20px;
  }
}