我希望左边有一个简短的文字,右边有一些社交图标。
逻辑如下:我有一个段落元素<p>
带有一些文本,它们居中(float:left
),在此文本之后,在这段内,我有一个横向列表使用<span>
创建的社交图标,与右侧(float:right
)对齐。
但是,它不起作用,因为图标在 下方显示
这是fiddle(虽然图标不起作用,因为它们已导入)。
HTML:
<p class="post-meta"> April 7, 2017
<span class="share-icons">
<ul class ="social-icons" style="list-style: none">
<li class="zocial-twitter"></li>
<li class="zocial-facebook"></li>
<li class="zocial-googleplus"></li>
<li class="zocial-reddit"></li>
</ul>
</span>
</p>
CSS:
@import url(http://weloveiconfonts.com/api/?family=zocial);
/* zocial */
[class*="zocial-"]:before {
font-family: 'zocial', sans-serif;
}
.post-title {
text-align: left;
font-weight: 700;
}
.post-meta {
margin-top: 0;
color: grey;
font-weight: 700;
overflow: hidden;
}
.share-icons {
float: right;
}
.social-icons li {
display:inline;
padding: 5px;
}
答案 0 :(得分:1)
正如Gurtej Singh所说。
更改标记。 Ul必须在段落之外。我添加了父元素,因此我们可以使用flex进行垂直对齐。
@import url(http://weloveiconfonts.com/api/?family=zocial);
/* zocial */
[class*="zocial-"]:before {
font-family: 'zocial', sans-serif;
}
* {
margin: 0;
padding: 0;
}
.flex {
padding: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.post-title {
text-align: left;
font-weight: 700;
}
.post-meta {
margin-top: 0;
margin-right: 15px;
color: grey;
font-weight: 700;
overflow: hidden;
}
.share-icons {
float: right;
}
.social-icons li {
display:inline-block;
padding: 5px;
}
&#13;
<div class="flex">
<p class="post-meta">April 7, 2017</p>
<ul class ="social-icons" style="list-style: none">
<li class="zocial-twitter"></li>
<li class="zocial-facebook"></li>
<li class="zocial-googleplus"></li>
<li class="zocial-reddit"></li>
</ul>
</div>
&#13;
答案 1 :(得分:0)
您需要取消padding-start
ul.social-icons{
-webkit-padding-start: 0px;
}
(Chrome的默认值,至少为40px)
答案 2 :(得分:0)
以下是基于您的代码的解决方案,我移动了<span>
并清理了一个类