如何讓兩個單槓互相碰撞

我正在製作一份BBC網站的副本，並希望製作兩個單槓（標題的一部分）互相碰撞。現在，我想刪除兩者之間的空間。如何讓兩個單槓互相碰撞

這是我得到的圖像： enter image description here

下面是HTML和CSS：

<!doctype html> 
<html> 
<head> 
    <title>BBC_Copy</title> 

    <meta charset="utf-8" /> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 

    <style type="text/css"> 

     body { 
      margin:0; 
      font-family: arial, helvetica, sans-serif; 
     } 

     #topbar { 
      background-color:#7A0000; 
      width: 100%; 
      height:40px; 
      color:white; 
     } 

     .fixedwidth { 
      width:1050px; 
      margin:0 auto; 
     } 

     #logodiv { 
      padding-top:5px; 
      float:left; 
      border-right:1px solid #770000; 
      padding-right: 10px; 
     } 

     #signindiv { 
      font-weight: bold; 
      padding:2px 80px 12px 20px; 
      font-size: 0.9em; 
      float:left; 
      border-right:1px solid #770000; 
     } 

     #signindiv img { 
      position:relative; 
      top:3px; 
     } 

     #topmenudiv { 
      float:left; 
     } 

     #topmenudiv ul { 
      margin:0; 
      padding:0; 
     } 

     #topmenudiv li { 
      list-style: none; 
      font-wieght:bold; 
      font-size:0.9em; 
      border-right:1px solid #770000; 
      height:100%; 
      padding:10px 20px 12px 20px; 
      float:left; 
     } 

     #searchdiv { 
      float:left; 
      padding:5px 0 0 10px; 
     } 

     #searchdiv input { 
      height:25px; 
      border:none; 
      font-size:0.9em; 
      padding-left: 10px; 
      background-image: url("images/magnify.png"); 
      background-repeat: no-repeat; 
      background-position:center right; 
     } 

     .break { 
      clear:both; 
     } 

     #newsbar { 
      background-color:#7A0000; 
      width: 100%; 
      height:40px; 
      color:white; 
     } 



    </style> 

</head> 

<body> 
    <div id="container"> 
     <div id="topbar"> 
      <div class="fixedwidth"> 
       <div id="logodiv"> 
        <img src="images/bbc_logo.png" /> 
       </div> 
        <div id="signindiv"> 
         <p><img src="images/signin.png" />Sign In</p> 

        </div> 
        <div id="topmenudiv"> 
         <ul> 
          <li>News</li> 
          <li>Sport</li> 
          <li>Weather</li> 
          <li>iPlayer</li> 
          <li>TV</li> 
          <li>Radio</li> 
          <li>More...</li> 
         </ul> 
        </div> 
        <div id="searchdiv"> 
         <input type="text" placeholder="Search" /> 
        </div> 

      </div> 
      <div class="break"> 

      </div> 
      <div id="newsbar"> 



     </div> 

    </div> 
</body> 
</html>

來源

2014-12-03 pdenlinger

做出的jsfiddle？編輯：nvm我做了一個：[http://jsfiddle.net/fyfedt4z/](http://jsfiddle.net/fyfedt4z/） – starvator 2014-12-03 19:08:05

我們是否幫你釣魚？ – 2014-12-03 19:17:32

你的問題是：

<div id="signindiv"> 
    <p><img src="images/signin.png" />Sign In</p> 
</div>

的<p>標籤添加額外的保證金在頂部和底部。我會建議擺脫p標籤...他們不增加任何語義優勢。

來源

2014-12-03 19:12:32 philtune

這樣做。謝謝！ – pdenlinger 2014-12-03 19:17:58

@pdenlinger真棒。您可以接受讓社區知道您的問題得到解答的答案。 – philtune 2014-12-03 19:18:45

替換此：

<div id="signindiv"> 
    <p><img src="images/signin.png" />Sign In</p> 
</div>

與此：

<div id="signindiv"> 
    <img src="images/signin.png" />Sign In 
</div>

結果：http://jsfiddle.net/ru7zzc1w/1/

來源

2014-12-03 19:13:32 Stan

如何讓兩個單槓互相碰撞

回答

相關問題