イメージとリストをそれぞれの行に分けるように区切ります

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> 
 
    <span style="position: unset"><a><img src="C:\Users\David\Desktop\WebDevelopmentTest\images\NotWalla\logo.svg" style="height: 25%; width: 25%" alt="NEWS"></a></span> 
 
</header> 
 
<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 2

画像

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