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不起作用？

回答

相关问题