Question

我正试图在我网站的上半部分做一个顶部和底部。顶部将有一个.svg徽标，底部是一个列表。我无法将它们分开。我如何给每个部分都有自己的一行？

ul {
  list-style-type: none;
  text-align: center;
  margin: 0 auto;
  padding: 0px;
  overflow: hidden;
  background-color: #333333;
  display: block;
}

li {
  display: inline-block;
  margin: 0px auto;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  position: relative;
}

li span {
  position: absolute;
  top: 0.5px;
  /*background: orange;*/
  width: 100%;
  height: 2.5px;
  opacity: 0
}

li a {
  display: inline-block;
  background-color: #333333;
  color: white;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  border: 2px;
  vertical-align: -13px;
}

li:hover span {
  animation: pulse 1s;
  animation-fill-mode: forwards;
}

@keyframes pulse {
  0% {
    opacity: 0;
    transform: translateY(5px)
  }
  100% {
    opacity: 1;
  }
}

hr {
  margin: 10px;
  border-width: 1px;
}

<header>
  <span style="position: unset"><a><img align="right" src="C:\Users\David\Desktop\WebDevelopmentTest\images\NotWalla\logo.svg" style="height: 25%; width: 25%" alt="NEWS"></a></span>
</header>
<br>
<nav>
  <ul>
    <li><span style="background: blue"></span><a href="#shopping">A</a></li>
    <li><span style="background: red"></span><a href="#wanted">B</a></li>
    <li><span style="background: green"></span><a href="#games">C</a></li>
    <li><span style="background: brown;"></span><a href="#TECH">D</a></li>
    <li><a href="#tourism" style="border-top-color: yellow;">E</a></li>
    <li><span style="background: burlywood;"></span><a href="#health">F</a></li>
    <li><span style="background: cyan;"></span><span></span><a href="#food" ">G</a></li>
    <li><span style="background: magenta; "></span><a href="#fashion ">H</a></li>
    <li><span style="background: gray; "></span><a href="#culture ">I</a></li>
    <li><span style="background: firebrick; "></span><a href="#car ">J</a></li>
    <li><span style="background: olivedrab; "></span><a href="#TV ">K</a></li>
    <li><span style="background: silver; "></span><a href="#business ">L</a></li>
    <li><span style="background: lightblue; "></span><a href="#sport ">M</a></li>
    <li><span style="background: khaki; "></span><a href="#news ">N</a></li>
        </ul>
</nav>

Answer 1

使用内联CSS（align: right）浮动图像。正如hungerstar在评论中所指出的，this property is deprecated。你应该删除它，而是可以使用text-align将图像放在右边。

示例

ul { list-style-type: none; text-align: center; margin: 0 auto; padding: 0px; overflow: hidden; background-color: #333333; display: block; } li { display: inline-block; margin: 0px auto; border-right: 1px solid black; border-bottom: 1px solid black; position: relative; } li span { position: absolute; top: 0.5px; /*background: orange;*/ width: 100%; height: 2.5px; opacity: 0 } li a { display: inline-block; background-color: #333333; color: white; text-align: center; padding: 10px; text-decoration: none; border: 2px; vertical-align: -13px; } li:hover span { animation: pulse 1s; animation-fill-mode: forwards; } @keyframes pulse { 0% { opacity: 0; transform: translateY(5px) } 100% { opacity: 1; } } hr { margin: 10px; border-width: 1px; } header { text-align: right; }

<header> <a><img src="C:\Users\David\Desktop\WebDevelopmentTest\images\NotWalla\logo.svg" style="height: 25%; width: 25%" alt="NEWS"></a> </header> <nav> <ul> <li><a href="#shopping">A</a></li> <li><a href="#wanted">B</a></li> <li><a href="#games">C</a></li> <li><a href="#TECH">D</a></li> <li><a href="#tourism" style="border-top-color: yellow;">E</a></li> <li><a href="#health">F</a></li> <li><a href="#food" ">G</a></li> <li><a href="#fashion ">H</a></li> <li><a href="#culture ">I</a></li> <li><a href="#car ">J</a></li> <li><a href="#TV ">K</a></li> <li><a href="#business ">L</a></li> <li><a href="#sport ">M</a></li> <li><a href="#news ">N</a></li> </ul> </nav>

Answer 2

将class .clear添加到＆＃34;＆lt; a＆gt;＆＃34;包含图像的标记

.clear {
    content: '';
    display: block;
    clear: both;
}

分离图像和列表，使它们在各自的行中

2 个答案: