Question

大家好，周五晚很开心，

我想在同一行中使用以下句子而不是两行：

echo "- About $foundnum results - <div class='feedback-search'><a href=''>Give us Feedback about this result</a></div><p><br>";

问题在于，通过应用css div class ='feedback-search'，它会创建一个新行并将文本放在下面。我怎样才能把所有东西都放在一行？

下面是我的页面的完整代码：

非常感谢你提前

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>CLIHELP - Help for Command Line Interface</title>
  <meta name="description" content="Help for Command Line Interface">
  <meta name="author" content="clihelp.org">

  <style>
    .navmenu {
    background-color: #FFFFFF;
    }

    .navmenu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    align-items: center;
    }

    .navmenu li:last-child {
    margin-left: auto;
    }

    .navmenu ul li a {
    text-decoration: none;
    margin: 4px;
    padding: 5px 20px 5px 20px;
    color: #FFFFFF;
    background: #4285F4;
    display: inline-block;
    }

    .main-content {
    padding: 5px 20px 5px 20px;
    }

    .feedback-search {
    font-size: 13px;
    }

    .title {
    font-size: 20px;
    }

    .title a {
    text-decoration: none;
    }

    .title a:hover {
    text-decoration: underline;
    }   

    .tags {
    color: #006621;
    }
  </style>

</head>

<body>
    <div class="navmenu">
        <ul id=menu>
            <li><a href="http://www.clihelp.org/Clihelp%20V2/index.php">Clihelp</a></li>
            <li><a href="https://github.com/clihelp/dev_clihelp">GitHub</a></li>
            <li><form action='q.php' method='GET'>
                <input type='text' size='25' name='search'>
                <input type='submit' name='submit' value='Search' >
                    </form></li>
        </ul>
    </div>


    <div class="main-content">
    <?php

        $button = $_GET ['submit'];
        $search = $_GET ['search'];

        if (!$button)
            echo "you didn't submit a keyword";
        else {
            if (strlen($search) <= 1)
            echo "Search term too short";
            else {
            echo "<p>Your search - <b>$search</b> ";

            mysql_connect("localhost", "username", "password");
            mysql_select_db("dbname");

            $search_exploded = explode(" ", $search);

            foreach ($search_exploded as $search_each) {

                $x++;

                if ($x == 1)

                $construct .= "(CONCAT(code,cliCommandId) LIKE '%$search_each%' OR  os LIKE '%$search_each%' OR title LIKE '%$search_each%' OR tags LIKE '%$search_each%' OR script LIKE '%$search_each%') ";
                else
                $construct .= "AND (CONCAT(code,cliCommandId) LIKE '%$search_each%' OR  os LIKE '%$search_each%' OR title LIKE '%$search_each%' OR tags LIKE '%$search_each%' OR script LIKE '%$search_each%')";

            }

            $construct = "SELECT * FROM cliCommand WHERE $construct";
            $run = mysql_query($construct);

            $foundnum = mysql_num_rows($run);

            if ($foundnum == 0)
                echo "- did not match any documents.</br></br>Suggestions:</br></br>- Make sure all words are spelled correctly.</br>- Try different keywords.</br>- Try more general keywords.</br>- Search by id.";
            else {
                echo "- About $foundnum results - <div class='feedback-search'><a href=''>Give us Feedback about this result</a></div><p>";

                while ($runrows = mysql_fetch_assoc($run)) {
                $cliCommandId = $runrows ['cliCommandId'];
                $code = $runrows ['code'];
                $os = $runrows ['os'];
                $title = $runrows ['title'];
                $tags = $runrows ['tags'];
                $script = $runrows ['script'];

                echo "
        <div class='title'><a href=''>$title</a></div>
        <div class='tags'>$tags</div>
        $script<br>
        <p>
        ";
                }
            }
            }
        }
    ?>
    </div>
</body>
</html>

Answer 1

将div更改为span：


echo "- About $foundnum results - <span class='feedback-search'><a href=''>Give us Feedback about this result</a></span><p><br>";
                                   ^                                                                                ^
//Notice the span instead of div --| (here) ------------------------------------------------------------------------| (and here)

发生这种情况的原因：

此分割为两行的原因是默认情况下<div>是块级元素，这意味着它的显示值为block。

默认情况下，块级元素会展开以适合其容器的宽度，在您的情况下，该容器的宽度是行的宽度。这将以下内容推送到下一行。

<span>元素是一个内联元素，默认情况下会在宽度上展开以适合其内容。

有关内联块，块和内联块元素之间差异的直观说明，请参阅this post。

添加div会导致创建新行

1 个答案: