浮法右里面的div元素都将在一个水平线上

Question

我想浮动右内div（文本，图像和按钮）的所有元素为在一个水平行使用CSS。我怎样才能实现呢？

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