对齐 HTML 和 CSS 中的文本和图标

Question

I want it so all the icons are where they are and the text to the right needs more space between the icon and the text so all text starts at the same place.

Like this:

ICON  TEXT
ICON  TEXT
ICON  TEXT
ICON  TEXT
ICON  TEXT
ICON  TEXT

And not:

ICON TEXT
ICON   TEXT
ICON  TEXT
ICON TEXT
ICON  TEXT


<ul>
<li><i class"fa fa-icon"></i> <a href="example.com">Example</a></li>
<li><i class"fa fa-icon"></i> <a href="example.com">Example</a></li>
<li><i class"fa fa-icon"></i> <a href="example.com">Example</a></li>
<li><i class"fa fa-icon"></i> <a href="example.com">Example</a></li>
<li><i class"fa fa-icon"></i> <a href="example.com">Example</a></li>
</ul>

Answer 1

Either make all the icons the same width or use the CSS grid.

 ul { list-style: none; padding: 0; margin: 0; } ul.width i { width: 1.5em; } ul.grid { display: grid; grid-template-columns: auto 1fr; gap: 0 0.5em; } ul.grid > li { display: contents; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <ul class="width"> <li><i class="fas fa-envelope"></i> <a href="example.com">envelope</a></li> <li><i class="fas fa-graduation-cap"></i> <a href="example.com">graduation-cap</a></li> <li><i class="fas fa-school"></i> <a href="example.com">school</a></li> <li><i class="fab fa-instagram"></i> <a href="example.com">instagram</a></li> <li><i class="fab fa-linkedin-in"></i> <a href="example.com">fa-linkedin-in</a></li> </ul> <br> <ul class="grid"> <li><i class="fas fa-envelope"></i> <a href="example.com">envelope</a></li> <li><i class="fas fa-graduation-cap"></i> <a href="example.com">graduation-cap</a></li> <li><i class="fas fa-school"></i> <a href="example.com">school</a></li> <li><i class="fab fa-instagram"></i> <a href="example.com">instagram</a></li> <li><i class="fab fa-linkedin-in"></i> <a href="example.com">fa-linkedin-in</a></li> </ul>

Answer 2

just put those text in a tag like and add a few pixel left padding. that'll work. If you could git some sample code. Explanation would have been easier.

 .text{ padding-left: 20px; }

 <div class="elements"> <span></span> <span class="text">Home</span> </div>