Closed. This question needs
My current HTML and CSS code is this:
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 10%;
background-color: #B600FF;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #FFF000;
padding: 8px 16px;
text-decoration: none;
font-family: 'Gemunu Libre', sans-serif;
font-size: 25px;
}
.logo-image {
width: 46px;
height: 46px;
border-radius: 50%;
overflow: hidden;
margin-top: -6px;
}
img {
height: 30px;
width: 88px;
vertical-align: middle;
}
<ul>
<li>
<a class="active" href="#home">Home</a>
</li>
<img src="JS Icon.png">
<li><a href="#js">About</a></img>
</li>
<li><a href="#csharp">News</a></li>
<li><a href="#sql">Blog</a></li>
<li><a href="#python">Fun</a></li>
</ul>
<div style="margin-left:10%;padding:1px 16px;height:1000px; background-color: #FFFFFF;">
</div>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>
But I cant add the image before the for example About. Can you explain how to make the CSS so the image appear before About? I was trying to make it but didn't succeed. Thanks for the help in advance!
CodePudding user response：
Just pack the <img> tag over the <li> tag. Or you can set the <img> tag into a <picture> tag and try it again.
The result should look something like this:
<ul>
<picture>
<pic>
</picture>
</ul>
or
<picture>
<pic>
</picture>
<ul>
</ul>
CodePudding user response：
You can use display: inline-block to align every element as an inline element next to each other instead of beneath each other:
li.with-image > * {
display: inline-block;
}
Also remove any margins / paddings from .logo-img and img
The > * selector selects every direct child, here setting every direct child to display: inline-block
Now you can use the with-image class on a li where you want to put the image in front of the link:
<li class="with-image">
<img src="src.png">
<a href="#">About</a>
</li>
With your code the html renders as
<img src="JS Icon.png">
<li><a href="#js">About</a></li>
Thus putting The image before the li, so watch how you close your tags!
Also check out something like flexbox or css-grid if you want more control over the display of your elements.
With css grid to automatically align :
li.with-image {
display: grid;
align-items: center;
grid-auto-flow: column;
}
Checkout this guide for css-grid
