我正在尝试在无序列表中制作横向社交媒体链接我试过简单地将img标签放入其工作但未对齐的图像中请检查我的代码并帮助我
body{
background:#080;
}
.social-sites {
margin-left: 50px;
margin-top: 20px;
position: relative;
}
.social-sites ul {
list-style-type: none;
}
.social-sites ul li {
display: inline-block;
text-align: center;
float: left;
}
.social-sites ul li a {
text-decoration: none;
padding: 12px;
margin: 8px;
font-size: 20px;
color: #fff;
}<div class="social-sites">
<ul>
<li class="fb">
<a href="facebook.com" target="_blank">
<img src="http://www.closetoyou.co/v/vspfiles/assets/images/fbook.png" />Facebook</a>
</li>
<li class="twit">
<a href="twitter.com" target="_blank">
<img src="http://i.imgur.com/9Z46uKc.png" />Twitter</a>
</li>
<li class="ld">
<a href="linkedin.com" target="_blank">
<img src="http://www.vds-horeca.nl/media/12768/linkedin_icon_small.png" />LinkedIn</a>
</li>
</ul>
</div>
</div>
答案 0 :(得分：0)
您需要拥有相同高度的所有图像。我还增加了一些余量来占空间。
.social-sites ul li img{
max-height: 30px;
margin-right: 5px;
}
.social-sites{
margin-left: 50px;
margin-top: 20px;
position: relative;
}
.social-sites ul{
list-style-type: none;
}
.social-sites ul li{
display: inline-block;
text-align: center;
float: left;
}
.social-sites ul li a{
text-decoration: none;
padding: 12px;
margin: 8px;
font-size: 20px;
color: #fff;
}
.social-sites ul li img{
max-height: 30px;
margin-right: 5px;
}<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body style="background-color:green;">
<div class="social-sites">
<ul>
<li class="fb"><a href="facebook.com" target="_blank"><img src ="http://www.closetoyou.co/v/vspfiles/assets/images/fbook.png"/>Facebook</a></li>
<li class="twit"><a href="twitter.com" target="_blank"><img src ="http://i.imgur.com/9Z46uKc.png"/>Twitter</a></li>
<li class="ld"><a href="linkedin.com" target="_blank"><img src ="http://www.vds-horeca.nl/media/12768/linkedin_icon_small.png"/>LinkedIn</a></li>
</ul>
</div>
</div>
</body>
答案 1 :(得分：0)
从li标记中删除body{background:green}
.social-sites{
margin-left: 50px;
margin-top: 20px;
position: relative;
}
.social-sites ul{
list-style-type: none;
}
.social-sites ul li{
display: inline-block;
text-align: center;
vertical-align:middle
}
.social-sites ul li a{
text-decoration: none;
padding: 12px;
margin: 8px;
font-size: 20px;
color: #fff;
vertical-align:middle;
display: inline-block;
}
.social-sites ul li a img{
width:40px;
margin-right:5px;
}并为img标记设置相同的高度，并在右侧添加一些边距。
<div class="social-sites">
<ul>
<li class="fb">
<a href="facebook.com" target="_blank">
<img src ="http://www.closetoyou.co/v/vspfiles/assets/images/fbook.png"/>Facebook</a>
</li>
<li class="twit">
<a href="twitter.com" target="_blank">
<img src ="http://i.imgur.com/9Z46uKc.png"/>Twitter</a>
</li>
<li class="ld">
<a href="linkedin.com" target="_blank">
<img src ="http://www.vds-horeca.nl/media/12768/linkedin_icon_small.png"/>LinkedIn</a></li>
</ul>
</div>ref.addValueEventListener(new ValueEventListener() {
@Override
public void onDataChange(DataSnapshot dataSnapshot) {
for (DataSnapshot child : dataSnapshot.getChildren()) {
for (DataSnapshot single : child.getChildren()) {
Map<String, Object> map = (Map<String, Object>) single.getValue();
namerc = (String) map.get("Namerc");
// String image = (String) map.get("Imagerc");
description = (String) map.get("Description");
title=(String) map.get("Title");
if (namerc!=null && description!=null && title!=null) {
String[] title1={title};
String[] desc1={description};
String[] name1={namerc};
Toast.makeText(getActivity(), description, Toast.LENGTH_SHORT).show();
List<HashMap<String, String>> aList = new ArrayList<HashMap<String, String>>();
for (int i=0;i<title1.length;i++) {
HashMap<String, String> hm = new HashMap<String, String>();
hm.put("title", title1[i]);
hm.put("desc", desc1[i]);
hm.put("name", name1[i]);
aList.add(hm);
}
// Keys used in Hashmap
String[] from = {"title", "desc", "name"};
int[] to = {R.id.posttitle, R.id.postdesc, R.id.postdate};
//Picasso.with(getActivity()).load(image).into(image1);
ListView listView = (ListView) rootView.findViewById(R.id.listView);
SimpleAdapter adapter = new SimpleAdapter(getActivity(), aList, R.layout.layoutarray, from, to);
listView.setAdapter(adapter);
}
}
}
}
@Override
public void onCancelled(FirebaseError firebaseError) {
}
});
答案 2 :(得分：0)
添加图片宽度和高度
<ul>
<li class="fb">
<a href="facebook.com" target="_blank">
<img src ="http://www.closetoyou.co/v/vspfiles/assets/images/fbook.png" width="30"/>Facebook</a>
</li>
<li class="twit">
<a href="twitter.com" target="_blank">
<img src ="http://i.imgur.com/9Z46uKc.png" width="30"/>Twitter</a>
</li>
<li class="ld">
<a href="linkedin.com" target="_blank">
<img src ="http://www.vds-horeca.nl/media/12768/linkedin_icon_small.png" width="30"/>LinkedIn</a>
</li>
</ul>
.social-sites ul li a img{
width:30px;
height:30px;
}
.social-sites ul li {
display: inline-block;
}
答案 3 :(得分：0)
您只需调整img宽度。
您只需添加此代码：
.social-sites ul li a img {
height: 30px;
width: 30px;
}
body { background-color:grey;}
.social-sites{
margin-left: 50px;
margin-top: 20px;
position: relative;
}
.social-sites ul{
list-style-type: none;
}
.social-sites ul li{
display: inline-block;
text-align: center;
float: left;
}
.social-sites ul li a{
text-decoration: none;
padding: 12px;
margin: 8px;
font-size: 20px;
color: #fff;
}
.video-image {
left: 417px;
position: absolute;
top: 74px;
}
.fret_vids {
text-align: center;
}
.navigation-container {
letter-spacing: 1px;
}
.social-sites ul li a img {
height: 30px;
width: 30px;
margin: 0 5px 0 0;
}<div class="social-sites">
<ul>
<li class="fb"><a href="facebook.com" target="_blank"><img src ="http://www.closetoyou.co/v/vspfiles/assets/images/fbook.png"/>Facebook</a></li>
<li class="twit"><a href="twitter.com" target="_blank"><img src ="http://i.imgur.com/9Z46uKc.png"/>Twitter</a></li>
<li class="ld"><a href="linkedin.com" target="_blank"><img src ="http://www.vds-horeca.nl/media/12768/linkedin_icon_small.png"/>LinkedIn</a></li>
</ul>
</div>
</div>