使用 flex-box 定位

Question

这是我决定自己做的一个项目。我无法将复选框放在文本的左侧。当我希望它显示在文本的左侧时，它会显示在顶部。我也在用ejs。

截图如下：Screenshot

这里是 ejs 的代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Day of the week!</title>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100&display=swap" rel="stylesheet">
</head>
<body>

    <div class="container" >
    <h1 class="heading"><%= kindOfDay %></h1>
        <div class="box">
        <div class="list-item"> 
        <% for(var i=0; i<newItems.length; i++){ %>
            <input type="checkbox">
            <p><%= newItems[i] %></p>
            <hr>
            
        <% } %>
        </div>   

    <form action="/" method="POST">
        <input type="text" name="taskItem" placeholder="New Task" autocomplete="off">
        <button class="add-item"type="submit">+</button>
    </form>

    </div>
    </div>  
</body>
</html>

这是css的代码：

    body{
    background-color: #E4E9FD;
    font-family: 'Roboto Mono', monospace;
    background-image: linear-gradient(35deg, #F38BA0 50%, #FFF5FD 50%);
    background-color:#fff;
    min-height: 1000px;
    
}

.container{
    height: 700px;
    display:flex;
    /* flex-wrap: wrap; */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.heading{
    background-color:#F38BA0;
    padding: 3px 5px;
    color: #fff;
    position: absolute;
    top:0;
    border-radius: 10px;
    max-width: 700px;
}

.box{
    max-width: 400px;
    margin: 50px auto;
    background: #fff;
    border-radius: 5px;
    box-shadow: 7px 7px 5px #303841;
    position: relative;
    
}
input[type="text"]::placeholder{
    color: gray;
}

input[type="text"]{
    border: transparent;
    width: 200px;
    height: 50px;
    border-radius: 5px;

}

input[type="text"]:focus{
    outline: none;
    box-shadow: inset 0 -4px 0 0 #F38BA0;

} 


input[type="checkbox"]{
    margin-right:14px;
    cursor:pointer;
  
}

.list-item{
    min-width:400px;
    min-height: 70px;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
    font-size: 1.25em;
    text-align:center;
}

.add-item{
    background-color: #F38BA0;
    border: transparent;
    border-radius: 70%;
    color: #fff;
    height: 40px;   
    width: 40px;
    font-size: 1.25em;
    cursor: pointer;
    padding: 4px 4px;
}

hr{
    width:100%;
    opacity: 0.5;
}

这里是js的代码：

    const express = require("express");
const app = express();
app.use(express.urlencoded({extended:true}));
app.set("view engine","ejs");
app.use(express.static("public"));
items = [];

app.get("/", function(req,res){
    var today = new Date();
    var options = {
        weekday: "long",
        day: "numeric",
        month: "long"
    };
    var day = today.toLocaleDateString("en-US", options);
    res.render("list", {kindOfDay: day, newItems :items});

});

app.post("/",function(req,res){
    var item = req.body.taskItem;
    items.push(item);
    res.redirect("/");
});

app.listen(3000, function(){
    console.log("Server is up");
});

希望有人能告诉我我做错了什么。

谢谢！

Answer 1

您应该删除 .list-item 类中的“flex-direction:column”行

.list-item{
    min-width:400px;
    min-height: 70px;
    display:flex;
    justify-content: center;
    align-items: center; 
    font-size: 1.25em;
    text-align:center;
}

或使用：flex-direction:row

Answer 2

如果您可以稍微更改 DOM，您可以将 p 和复选框包装在 div 中：

        <div class="list-item"> 
         <% for(var i=0; i<newItems.length; i++){ %>
            <div class="wrap">
               <input type="checkbox">
               <p><%= newItems[i] %></p>
            </div>
            <hr>
            
         <% } %>
        </div>   

并设置样式：

.wrap{
    display: flex;
    align-items: center;
    justify-content: space-around;
}

另外label 可能比p 更合适。