我想让我的链接显示为内联

时间：2018-06-26 04:41:04

标签： html css

我正在尝试使链接显示为内联。

我曾尝试过更改显示方式，但没有成功，有人可以帮我吗？我很难弄清楚如何使5个链接连续排成一行。 

.container {
    padding: 0;
    margin: 0;

}

.box-1 {
    display: inline-block;
}

ul {
    display: flex;
    list-style-type: none;
}

.fa {
    display: flex;
    padding: 5px;
    font-size: 30px;
    width: 20px;
    text-align: center;
    text-decoration: none;
    margin: 0;
    border-radius: 250px 250px;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
    background: #3B5998;
    color: white;
    padding: 5px;
    margin-top: 5px;
}

.fa-twitter {
    background: #55ACEE;
    color: white;
    padding: 5px;
    margin-top: 5px;
}

.fa-youtube {
    background: #bb0000;
    color: white;
    padding: 5px;
    margin-top: 5px;
}

.fa-instagram {
    background: #125688;
    color: white;
    padding: 5px;
    margin-top: 5px;
}

.fa-snapchat-ghost {
    background: #fffc00;
    color: white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    padding: 5px;
    margin-top: 5px;
}
<!DOCTYPE html>
<html>

<head>

<meta charset="ISO-8859-1">
<title>Blogs</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    
    <div class="container">
        <div class="box-1">
            <ul class="fa">
                <li><a href="#" class="fa fa-facebook"></a></li>
                <li><a href="#" class="fa fa-twitter"></a></li>
                <li><a href="#" class="fa fa-youtube"></a></li>
                <li><a href="#" class="fa fa-instagram"></a></li>
                <li><a href="#" class="fa fa-snapchat-ghost"></a></li>
            </ul>
        </div>
    </div>
	
</body>
</html>

我将不胜感激。我正在尝试使用flexbox，但这似乎并没有给我我想要的输出。

5 个答案:

答案 0 :(得分：1)

您应该在display: inline而非display: inline-flex上设置li或ul。 ul有display: block，但这可能就是您想要的。

我已经添加了display: inline-flex，并从您的fa中删除了ul类，因为我可以肯定这不是您想要的。

这是最小示例。

ul {
    display: flex;
    list-style-type: none;
}

li {
    display: inline-flex;
}

.fa {
    display: flex;
    padding: 5px;
    font-size: 30px;
    width: 20px;
    text-align: center;
    text-decoration: none;
    margin: 0;
    border-radius: 250px 250px;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
    background: #3B5998;
    color: white;
    padding: 5px;
    margin-top: 5px;
}

.fa-twitter {
    background: #55ACEE;
    color: white;
    padding: 5px;
    margin-top: 5px;
}

.fa-youtube {
    background: #bb0000;
    color: white;
    padding: 5px;
    margin-top: 5px;
}

.fa-instagram {
    background: #125688;
    color: white;
    padding: 5px;
    margin-top: 5px;
}

.fa-snapchat-ghost {
    background: #fffc00;
    color: white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    padding: 5px;
    margin-top: 5px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<ul>
  <li><a href="#" class="fa fa-facebook"></a></li>
  <li><a href="#" class="fa fa-twitter"></a></li>
  <li><a href="#" class="fa fa-youtube"></a></li>
  <li><a href="#" class="fa fa-instagram"></a></li>
  <li><a href="#" class="fa fa-snapchat-ghost"></a></li>
</ul>

答案 1 :(得分：0)

只需在display:inline-block元素上使用<li>。还要从fa中删除<ul>类，该类通常保留给其中包含fontAwesome图标的元素，并且您在自定义CSS中也为此设置了宽度，因此它可以为您提供整个<ul>固定宽度。这是一个片段：

.container {
    padding: 0;
    margin: 0;

}

ul {
    list-style-type: none;
}
ul li{
  display:inline-block;
}

.fa {
    padding: 5px;
    font-size: 30px;
    width: 20px;
    text-align: center;
    text-decoration: none;
    margin: 0;
    border-radius: 250px 250px;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
    background: #3B5998;
    color: white;
    padding: 5px;
    margin-top: 5px;
}

.fa-twitter {
    background: #55ACEE;
    color: white;
    padding: 5px;
    margin-top: 5px;
}

.fa-youtube {
    background: #bb0000;
    color: white;
    padding: 5px;
    margin-top: 5px;
}

.fa-instagram {
    background: #125688;
    color: white;
    padding: 5px;
    margin-top: 5px;
}

.fa-snapchat-ghost {
    background: #fffc00;
    color: white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    padding: 5px;
    margin-top: 5px;
}
<!DOCTYPE html>
<html>

<head>

<meta charset="ISO-8859-1">
<title>Blogs</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    
    <div class="container">
        <div class="box-1">
            <ul>
                <li><a href="#" class="fa fa-facebook"></a></li>
                <li><a href="#" class="fa fa-twitter"></a></li>
                <li><a href="#" class="fa fa-youtube"></a></li>
                <li><a href="#" class="fa fa-instagram"></a></li>
                <li><a href="#" class="fa fa-snapchat-ghost"></a></li>
            </ul>
        </div>
    </div>
	
</body>
</html>

答案 2 :(得分：0)

尝试通过更改fa类添加新的类名称

.newClass{
  display:inline-block;
 }

并为

之类的li标签留出一些空白 
.newClass li {
 margin-left:2%;

}

答案 3 :(得分：0)

赋予$('li:has(> ul)').find('[name*="menu"]').val(''); 样式box-1和display: inline-block !important;样式fa

这里是jsfiddle 简单：）

答案 4 :(得分：0)

 <!DOCTYPE html>
 <html>
 <style>
 ul
 {
 display:flex;  
 list-style:none;
}
</style>

<head>

 <meta charset="ISO-8859-1">
 <title>Blogs</title>
 <link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-       awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<div class="container">
    <div class="box-1">
        <ul>
            <li><a href="#" class="fa fa-facebook"></a></li>
            <li><a href="#" class="fa fa-twitter"></a></li>
            <li><a href="#" class="fa fa-youtube"></a></li>
            <li><a href="#" class="fa fa-instagram"></a></li>
            <li><a href="#" class="fa fa-snapchat-ghost"></a></li>
        </ul>
    </div>
  </div>

 </body>
 </html>
相关问题
最新问题