html - 将 div 内的所有元素向右浮动，使其水平排成一行

Question

我想使用 CSS 将 div 中的所有元素(文本、图片和按钮)向右浮动，使其水平排成一行。我怎样才能实现它？

.log {float: right;} 将它们作为一个元素向右但垂直 float 。

编辑: 我有什么:

img
txt
button

float: right 工作方式如下:

                                                                       img
                                                                       txt
                                                                       button

我想要的:

                                                                 img text button

我的代码:

$id = $_SESSION['id'];
$st = $_SESSION['status'];
$fileNameNew = $_SESSION['fileName'];

echo '<div class="log">';
if($st == 0){
    echo "<img style='width:50px;height:50px;' src='includes/uploads/".$fileNameNew."?".mt_rand()."'>";
    echo "<p>Witaj : " .$_SESSION['uid'];
    echo "</p>";
}else{
    echo '<img style="width:50px;height:50px;" src="includes/uploads/default.png">';
}
if (isset($_SESSION['id'])) {
    echo '<form action="includes/logout.php">
        <button class="logout" type="submit">Wyloguj się</button>
    </form>';
}else{
    header("Location: index.php");              
}
echo '</div>';
?>

Answer 1

您不想 float .log，您想要 float 单个元素。但是向右浮动它们也会颠倒它们出现的顺序。您可以颠倒 HTML 中元素的顺序，然后向右浮动。

.log img, .log p, .log form {
  float: right;
}

或者你可以使用 flexbox。 Flexbox 会将 child 水平放置。如果您的用户群正在使用 > ie9

，我推荐这个

.log {
  display: flex;
}

让 child inline-block 也会水平放置它们

.log img, .log p, .log form {
  display: inline-block;
}