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