HTML和CSS。社交按钮如何移动它们？

Question

嘿，我的社交按钮有问题。 我正在尝试移动它们，但是页面上只显示一个，因此无法移动。 我有三个按钮，它们的图像可以有人帮助我试图将它们放置在标题的直线中心或视频上方，并且我想将它们放置在链接上。

的HTML

<body>
  <div id="header">
    <div id="icons>
      <img src="facebook-64.png">
      <img src="twitter-64.png">
      <img src="instagram-64.png">
    </div>
    <img src="logo2.png">
    <div id="nav">
      <div id="nav_wrapper">

的CSS

img {
  position: absolute;  
  right: 640px;
  top: -50px; 
}

video {
  margin-top: 250px;
}

#icons {
  top: -220px;
}

标头中有黑点

Answer 1

您为所有img标签赋予相同的样式，从而导致它们重叠！ 尝试改变每个位置

Answer 2

如果使用绝对定位。 每个按钮需要一个不同的类。 最佳做法是使用类进行CSS样式设计，并保留ID以使用JavaScript定位元素。 图片需要包装在链接（标签）中，并且以下href中的＃号应设置为您的facebook，twitter和instagram主页的URL。

我个人将html设置为：

<body>
  <div class="header">
  <div class="icons>
    <a class="fb-link" href"#">
      <img src="facebook-64.png">
    </a>
    <a class="twr-link" href"#">
    <img src="twitter-64.png">
    </a>
    <a class="inst-link" href"#">
      <img src="instagram-64.png">
    </a>
  </div>
  <img src="logo2.png">
  <div id="nav">
    <div id="nav_wrapper">

与其使用绝对定位，不如直接将链接显示为块并将它们浮动到左边。 在包含的div上使用边距放置图标。 见下文。

的CSS

.icons{
  margin:20px auto; //gives margin of 20px top and bottom and centers buttons horizontally.
  width:220px;

}
.fb-link, .twr-link, .inst-link {
  display:block; 
  float:left;
  width:60px; //set width to the with of image used eg 64px
  margin-left:20px; 
}
.fb-link{
  margin-left:0; //if margin left was left at 20px the icons would be 20px off center.
}

使用这些原则来布局其余页面应该很简单。

HTML和CSS。社交按钮如何移动它们？

问题描述

2 个解决方案

解决方案1
0 2014-08-24 10:04:16

解决方案2
0 已采纳 2014-08-24 10:33:51

HTML和CSS。 社交按钮如何移动它们？

问题描述

2 个解决方案

解决方案1 0 2014-08-24 10:04:16

解决方案2 0 已采纳 2014-08-24 10:33:51

HTML和CSS。社交按钮如何移动它们？

解决方案1
0 2014-08-24 10:04:16

解决方案2
0 已采纳 2014-08-24 10:33:51