HTML爲什麼margin-top不起作用？

你好，我有一個使用CSS，HTML和PHP的網頁。看看這個代碼一分鐘請：HTML爲什麼margin-top不起作用？

<?php 
    session_start(); 

    include_once "mysql_connect.php"; 
    $log = null; 
    if(isset($_SESSION["ID"])){ 
    $log = $_SESSION["ID"]; 
    }else{ 
    $log=null; 
    } 
     $_SESSION["prevpage"] = "home"; 
     $terms = $_POST["search"]; 
     if($terms == null){ 
      header("location:home"); 
     } 
    ?> 
    <html> 
    <head> 
    <title><?php echo $terms;?></title> 

    <link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" /> 


    <link rel="stylesheet" href="css/reset.css"> 
    <link rel="stylesheet" href="css/text.css"> 
    <link rel="stylesheet" href="css/960_24_col.css"> 
    <link rel="stylesheet" href="css/style.css"> 
    <META NAME="ROBOTS" CONTENT="INDEX, FOLLOW"> 
    <meta name="description" CONTENT="Find everything and anything on Omicrome"> 
    <META NAME="ROBOTS" CONTENT="INDEX, FOLLOW"> 
    </head> 
      <body> 
      <div class = "container_24"> 
      <header> 
      <div id = "rectban"> 
      <h1>Omicrome</h1> 
      <nav> 
      <ul> 
      <li><a href="home">Home</a></li> 
      <li><a href="articles">Articles</a></li> 
      <li><a href="about">About</a></li> 
      <?php if($log != null){?> 
      <li id = "myprofilebanner"><a href="MyProfile">My Profile</a></li> 
      <?php }else{ ?> 
      <li id = "myprofilebanner"><a href="createAccount">Create Account</a>  </li> 
      <?php } ?> 


      <li id = "loginbanner"><a href= <?php if($log != null){?>"logout.php"<?php }else{?>"login"<?php }?>><?php if($log != null){?>Log Out<?php }else{?>Log In <?php }?></a></li> 

      </ul> 
      </nav> 
     </div> 
      <div id = "Postban"> 
      <form action="searchresults.php" method="post" enctype="multipart/form-data"> 
      <input class="searchbar" type="text" name="search" size="30" maxlength = "500" placeholder="Search"/> 
      <input type="submit" class = "searchbtn" value="[&nbsp;&nbsp;Go&nbsp;&nbsp;]" /> 
      <a class="Post" href="post" > 
      [&nbsp;&nbsp;Post&nbsp;&nbsp;] 
      </a> 
      </form>  
     </div>    
    </header> 





     <div class = "main clearfix"> 
     <div id = "rectsearchresults"> 

     <?php 


       $fetchlast = mysql_query("SELECT * FROM posts WHERE id=(SELECT MAX(id) FROM posts)"); 
       $lastrow = mysql_fetch_row($fetchlast); 
       $lastid = $lastrow[6]; 

       for ($i=1; $i <= $lastid; $i++) { 

        $currentname = mysql_query("SELECT * FROM posts WHERE id=$i"); 

        while ($row = mysql_fetch_array($currentname)) { 
         $title = $row[0]; 
         $desc = $row[1]; 
         $ID = $row[6]; 

         $title2 = rtrim($title); 
         $donetitle = str_replace(" ", "-", $title2); 
         $url = "articles/".$ID."/".$donetitle.""; 

         echo "<div id=\"result\"><img src=\"img/tempsmall.png\" alt = \"icon\" > 
           <a id=\"resultheader\" href=\"$url\">$title</a><br> 
           </div>"; 

        } 

       } 
     ?> 

    </div> 
    </div> 







    </div> 
    </div> 

    </body> 

    </html>

上面的代碼都在同一頁上它應該顯示一些搜索結果。我希望能夠上下移動標識爲'resultheader'的<a>標籤。由於某些原因保證金仍然有效，但保證金最高不會。我曾嘗試使用display:inline-block，因爲根據我閱讀的網絡文章，這是頭號解決方案。有人可以告訴我爲什麼它不起作用嗎？繼承人我CSS代碼：

#rectsearchresults{ 
    position: relative; 
    margin-top: -10px; 
    margin-left: -0px; 
    background: #ffffff; 
    padding-left: 20px; 
    padding-right: 20px; 
    padding-bottom: 20px; 
    padding-top: 20px; 
    width:916px; 

} 
#result{ 
    margin-bottom: 20px; 
} 
#resultheader{ 
    margin-left:10px; 
    color:black; 
    font-size: 15px; 
    margin-top: -20px; 
}

以下是我得到了我想要每個結果的標題與圖像的頂部

來源

2016-09-30 jack

當您有多個要設置樣式的元素時，請不要使用ID，而應使用類。 – Phiter

請隔離你的代碼，以顯示問題....包括問題和CSS的呈現的HTML ... – DaniP

你可以**顯示最終呈現的HTML ** –

<a>（錨標記）是內聯的是默認display:inline和

'內聯' 類型的元素不接受陰性切緣頂部

許多解決方案中存在這樣的：

1）使用display: table。它具有內嵌塊的內容擬合屬性，但也支持負邊距。

#resultheader { 
    margin-left: 60px; //adjust to your likes 
    color: black; 
    font-size: 15px; 
    margin-top: -30px; //adjust to your likes 
    display: table; 
}

2）使用vertical-align財產

#resultheader { 
    margin-left: 10px; 
    color: black; 
    font-size: 15px; 
    vertical-align: 10px; //adjust 
}

3）使用position: relative & top性能

#resultheader{ 
    margin-left:10px; 
    color:black; 
    font-size: 15px; 
    position: relative; 
    top: -6px; 
}

挑選您的選擇。

來源

2016-09-30 16:03:27

HTML爲什麼margin-top不起作用？

回答

相關問題