將div中的所有元素向右浮動到水平一行

Question

我想使用CSS將div所有元素（文本，圖片和按鈕）浮動到一行。 我該如何實現？

.log {float: right;}它們全部作為一個元素浮動到右側但垂直。

編輯：我有：

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

您不想浮動.log ，您想浮動單個元素。 但是，將它們向右浮動也會顛倒它們的顯示順序。您可以顛倒HTML中元素的順序，然后向右浮動。

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

或者，您可以使用flexbox。 Flexbox將孩子水平放置。 如果您的用戶群使用> ie9，我建議您這樣做

.log {
  display: flex;
}

使孩子inline-block也將它們水平放置

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