Question

您好我有一个使用css，html和php的网页。请看一下这段代码：

    <?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>

上面的代码都在同一页面上，它应该显示一些搜索结果。我希望能够向上和向下移动ID为<a>的{{1}}标记。由于某种原因，保证金留下工作但保证金顶部没有。我尝试使用'resultheader'，因为根据我阅读的网络文章，这是头号解决方案。有人可以告诉我为什么它不起作用？继承了我的css代码：

display:inline-block

这是我得到的，我希望每个结果的标题与图像的顶部内联

Answer 1

<a>（锚标记）默认为 display:inline 和

<强>＆＃39;直列＆＃39;类型元素不接受负边距

存在许多解决方案：

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＆amp; top属性

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

选择你的选择。

HTML为什么margin-top不起作用？

1 个答案: