HTML为什么顶边距不起作用？

jack 发表于 Dev

杰克

您好，我有一个使用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>

上面的代码都在同一页面上，它应该显示一些搜索结果。我希望能够上下移动<a>ID 'resultheader'。出于某种原因，左边距有效，而顶部距无效。我尝试使用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;
}

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

尼基尔·南贾帕（Nikhil Nanjappa）

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

'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;
}

选择您的选择。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-05-8

我来说两句

0条评论

登录后参与评论

来自分类Dev

为什么填充和边距不起作用？

来自分类Dev

HTML边距不起作用

来自分类Dev

为什么左右两边的负边距都不起作用？

来自分类Linux

为什么顶| grep>文件不起作用？

来自分类Dev

为什么“边距” CSS样式在FlowPanel（GWT）中不起作用？

来自分类Dev

如果子div比其父级大，为什么边距右行不起作用？

来自分类Dev

为什么这种CSS边距顶部样式不起作用？

来自分类Dev

为什么段落标签的这个边距不起作用？

来自分类Dev

CSS边距顶部不起作用

来自分类Dev

负边距不起作用

来自分类Dev

边距顶部菜单不起作用

来自分类Dev

边距/填充不起作用

来自分类Dev

ConstraintLayout边距不起作用

来自分类Dev

以边距居中：自动不起作用

来自分类Dev

为什么百分比填充/边距在Firefox和Edge中的弹性项目上不起作用？

来自分类Dev

为什么右上边距不起作用，而左上边距，上边距和下边距为什么不起作用？

来自分类Dev

html 中的边距顶部：-15px（负像素）在 Outlook 中不起作用

来自分类Dev

Ext JS 6.0.0按钮边距属性不起作用

来自分类Dev

右手边距不起作用

来自分类Dev

边距：自动在 flexbox 中不起作用

来自分类Dev

列之间的地基边距不起作用

来自分类Dev

边距在滚动视图上不起作用

来自分类Dev

在CSS中，边距和溢出不起作用

来自分类Dev

幻灯片周围的边距不起作用

来自分类Dev

动态插入视图时，android边距不起作用

来自分类Dev

导航栏边距：自动，不起作用

来自分类Dev

使用边距时画布不起作用

来自分类Dev

CSS形状边距，形状外部不起作用

来自分类Dev

@具有边距的媒体屏幕不起作用

Related 相关文章

文章