I am trying to make a navigation bar using icons from css.gg, and when I try to make the content go from left to right, it doesn't align properly. It just smoshes together, or one icon goes under below another.
以下是一张图片供参考：
我试过同时使用display: inline;和float: left;，效果更好，但并没有让所有东西都工作，因为第三个图标最终会在其他两个图标下面。
这是我的代码。分组在=====中的部分......可能是问题所在。
@import url('https://css.gg/games.css');
@import url('https://css.gg/comment.css');
@import url('https://css.gg/home-alt.css');
/*==============================================================================================*/
/* Nav Bar */
nav {
text-align: center;
color: white;
font-family: 'Courier New', Courier, monospace;
font-size: 10px;
position: absolute;
top: -1%;
margin-left: 45%;
margin-right: 45%;
}
/* ICONS */
.gg-home-alt {
/* This value will multiple the actual size */
--ggs: 1.5;
}
.gg-comment {
/* This value will multiple the actual size */
--ggs: 1.5;
}
.gg-games {
/* This value will multiple the actual size */
--ggs: 1.5;
}
/* END OF ICONS */
li {
float: left;
list-style-type: none;
padding-right: 20px;
}
/* Anchor/hyperlink content */
a {
color: white;
font-family: 'Courier New', Courier, monospace;
font-size: 15px;
}
/*================================================================================================*/
#mainSite {
text-align: center;
color: white;
font-family: 'Courier New', Courier, monospace;
font-size: 30px;
}
/* Text based/body content */
body {
margin: 0;
background: #67c3f9;
/*
background-image: url("https://68.media.tumblr.com/c5552d48c39cb834d0f5c249869d4737/tumblr_oiln82yPI91w0f40yo1_500.gif");
background-repeat: no-repeat;
background-size: cover;
background-position: 75%;
display: flex;
flex-direction: column;
min-height: 100vh;
*/
}
h1 {
text-align: center;
}
.title {
color: white;
font-family: 'Courier New', Courier, monospace;
font-size: 25px;
text-align: center;
position: absolute;
top: 25%;
margin-left: 40%;
margin-right: 40%;
}
footer {
width: 100%;
bottom: 0;
position: fixed;
font-size: 13px;
color: white;
left: 0;
height: 50px;
text-align: center;
font-family: 'Courier New', Courier, monospace;
}
/* Input content */
form {
display: flex;
justify-content: center;
}
form input {
background: none;
font-family: 'Courier New', Courier, monospace;
padding: 0px 17px;
height: 48px;
border: 3px solid white;
color: white;
border-radius: 3px;
outline: none;
width: 60%;
margin-top: 5px;
border-radius: 10px;
color: white;
position: absolute;
top: 55%;
text-align: center;
}
/* Games Page CSS */
#gTitle {
color: white;
font-family: 'Courier New', Courier, monospace;
font-size: 25px;
text-align: center;
position: absolute;
top: 15%;
margin-left: 30%;
margin-right: 30%;
}
.gamesTable {
position: absolute;
top: 50%;
padding: 5%;
text-align: center;
}<nav>
<ul>
<li>
<a href="g.html" class="navLinks"><i class="gg-games"></i></a>
</li>
<li>
<a href="https://discord.gg/jatF5KbCrT" class="navLinks"><i class="gg-comment"></i></a>
</li>
<li>
<a href="/index.html" class="navLinks"><i class="gg-home-alt"></i></a>
</li>
</ul>
</nav>
<body>
<!-- This is the main content of the website -->
<div class="title">
<h1>Plunge Proxy</h1>
</div>
<form>
<input id="search" placeholder="Enjoy the Internet!" />
</form>
1条答案
按热度按时间t3psigkw1#
请尝试以下代码：