为什么我的 <hr /> 标签之一比其他标签小得多？答案

【问题标题】：Why is one of my <hr /> tags much smaller than the others?为什么我的 <hr /> 标签之一比其他标签小得多？
【发布时间】：2014-09-30 16:00:53
【问题描述】：

为什么人力资源部门不做其他部门的工作？

_{（来源：gyazo.com）}

有点难看，但第一个和其他的不成比例，比其他的要小..我不确定为什么？

我的 CSS。

hr {
  margin: 20px 0;
  border: 0;
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #ffffff;
}

我的小时在哪里：

echo "<h1><hr />" . $row['blogTitle'] . "</h1>";

代码：

<?php 
//--- Authenticate code begins here ---
session_start();
//checks if the login session is true

if (!isset($_SESSION['username'])){
header("location:index.php");
}
$username = $_SESSION['username'];

// --- Authenticate code ends here ---


 include ('header.php'); 



        ?>




    <div class="blog-wrap">


        <section class="blog-content">



            <link rel="stylesheet" type="text/css" href="../css/style1.css">

            <form action="search.php" class="searchbar1" method="GET">
        <input type="text" name="query" />
        <input type="submit" class="btn btn-search" value="Search" />
    </form>



<div style="float:right">  <a class="btn btn-danger logout" href="logout.php" > Logout</a> </div>

<div id="menu">
    <ul id="nav">
        <li><a href="home.php" target="_self" >Home</a></li>
        <li><a href="session1.php" target="_self" >Sessions</a>

            <ul>
                <li><a href="session1.php" target="_self" >Session 1</a></li>
                <li><a href="session2.php" target="_self" >Session 2</a></li>
                <li><a href="session3.php" target="_self" >Session 3</a></li>
                <li><a href="session4.php" target="_self" >Session 4</a></li>
                <li><a href="session5.php" target="_self" >Session 5</a></li>
                <li><a href="session6.php" target="_self" >Session 6</a></li>
                <li><a href="session7.php" target="_self" >Session 7</a></li>
                <li><a href="session8.php" target="_self" >Session 8</a></li>
                <li><a href="session9.php" target="_self" >Session 9</a></li>
                <li><a href="session10.php" target="_self" >Session 10</a></li>
                <li><a href="session11.php" target="_self" >Session 11</a></li>
                <li><a href="session12.php" target="_self" >Session 12</a></li>
                <li><a href="session13.php" target="_self" >Session 13</a></li>
                <li><a href="session14.php" target="_self" >Session 14</a></li>



            </ul>
            <li><a href="blog.php" target="_self" >Blog</a></li>
            <li><a href="shop.php" target="_self" >Shop</a></li>
    </ul>
</div>

<div class="sidebar">
<?php 
                include "blogsidebar.php";
            ?>
            </div>
            <section class="blog-inner">
                <div class="blog-posts">
                    <?php 
                        $sql = "SELECT blog.*, users.*, category.*, COUNT(comment.blogID) AS commentcount 
                        FROM blog INNER JOIN users ON blog.authorID = users.userID INNER JOIN category ON 
                        blog.catID = category.catID LEFT JOIN comment ON blog.blogID = comment.blogID GROUP BY 
                        blog.blogID, comment.blogID ORDER BY dateposted DESC LIMIT 0,3"; //display the last 3 blog entries and count the number of comments for each blog entry 

                        $result = mysql_query($sql) or die(mysql_error($connection)); //run the query 

                        while ($row = mysql_fetch_array($result)) 
                        { 
                        echo "<article class='blog-post one'>";
                        echo "<aside class='blog-text-prev'>";
                        echo "<div class='text-content'>";
                        echo "<h1><hr />" . $row['blogTitle'] . "</h1>";
                        echo "<h1>" . $row['categoryImage'] .  "  " . $row['fullname'] . "  ". $row['category'] ."  " . date("F jS",strtotime($row['dateTime'])) . " </h1>";
                        echo "<div class='clear'></div>";
                        echo "<p>" . (substr(($row['blogContent']),0,304)) . " <i><b><a href='blog-post.php?blogID=" .$row['blogID']. "'>Read More...</a></i></b></p>";
                        echo "</div>";
                        echo "</aside>";
                        echo "</article>";
                        }
                    ?>

                </div>

            </section>
        </section>
    </div>
</section>
<!-- end login -->
<?php 
    include "footer.php";
?>

【问题讨论】：

...仅从代码输出的图像很难诊断代码问题。你能提供一个活生生的例子吗？
看到HR我的第一个想法是Human Resource ..你需要改进它
我认为问题出在containig <h1> 节点或类似容器的大小上。您也可以为此发布 CSS 吗？
另外，您真的需要将<hr> 放在<h1> 标记内吗？我觉得有点奇怪
尝试echo "<hr /><h1>" . $row['blogTitle'] . "</h1>"; - 如果<hr/> 在<h1> 标签内（首先不应该出现），它将采用这些属性，并且与 <h1> 相关的任何其他 CSS。

标签： php html css

【解决方案1】：

我不会把 hr 放在你的 h1 中。我只需将 h1 标签设置为具有顶部边框。

【讨论】：

【解决方案2】：

您将<hr> 放置在<h1> 节点中，这是行不通的。

在这里检查一下，在 HTML5 中它只是为了语义 http://www.w3schools.com/TAGS/tag_hr.asp

“但是，<hr> 标记仍可能在可视浏览器中显示为水平线，但现在是用语义术语定义的，而不是表象术语。”

【讨论】：