Question

我正在制作的此简单操作列表应用程序上的html元素在移动设备上运行时无法正确对齐。本质上，在移动设备上时，h1标签应位于屏幕中央以及其下方的输入框和添加按钮以及正在添加到页面的任务中，而在移动设备上，所有内容均未对齐。有修复程序吗？

let task;
let text;
let addTask;
let list;
let taskNo = 0;
let remove;
let input = document.getElementById('message');
let btn = document.getElementById('btn');

input.addEventListener("keypress", function() {
    if (event.keyCode == 13) {
        if (input.value === "") {
            alert("Please enter a task!");
        } else {
            createTask();
        }
    }
});

btn.onclick = function() {
    if (input.value === "") {
        alert("Please enter a task!");
    } else {
        createTask();
    }
};

function createTask() {
    
    task = input.value;
    
    addTask = document.createElement('li');
   
    text = document.createTextNode(task);
    
    addTask.appendChild(text);
    
    addTask.classList.add("task");
    
    taskNo++;
    
    addTask.id = taskNo;
    
    document.getElementById("taskList").appendChild(addTask);
    
    input.value = "";
    
    let list = document.getElementsByClassName("task");
    
    [...list].forEach(b => {
        b.addEventListener("click", () => {
            remove = document.getElementById(b.id);
            remove.parentNode.removeChild(remove);
        });
    });
}

html, body{
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
    background-color: #29313d;
    color: white;
}

#container {
    width: 100%;
}

h1{
    text-align: center;
    font-size: 44px;
}

#input{
    margin: auto;
    text-align: center;
}

#message, #btn{
    display: inline-block;
    height: 100%;
    margin-top: 10px;
    padding: 0;
    float: left;
    -webkit-box-sizing: border-box;
}

#message{
    background-color: #333;
    color: white;
    border: 4px solid coral;
    padding-left: 10px;
    width: 75%;
    height: 50px;
    border-radius: 10px;
}

#btn{
    font-size: 20px;
    background-color: coral;
    border: 4px solid coral;
    color: black;
    margin-left: 5%;
    width: 20%;
    height: 50px;
    border-radius: 10px;
}

#btn:focus{
    outline: none;
}

#message:focus{
    outline: none;
}

#input{
    height: 50px;
    width: 400px;
}

#taskList{
    list-style-type: none;
    padding: 0;
    margin-top: 50px;
}

.task {
    margin: auto;
    width: 85%;
    margin-top: 5px;
    padding: 10px;
    border: 4px solid coral;
    background-color: #333;
    color: white;
    border-radius: 10px;
}

@media(max-width: 600px) {
    
    #container {
        width: 80%;
    }
    
    h1{
        margin: auto;
    }
    
    #message{
        width: 100%;
    }
    
    #btn{
        display: none;
    }
    
    
    .task{
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=10">
        <link href="resources/style.css" rel="stylesheet" type="text/css">
        <link href="resources/logo.png" rel="shortcut icon" type="image/png">
        <title>Jennis App</title>
    </head>
    <body>
        <div id="container">
            <h1>To Do List</h1>
            <div id="input">
                <div class="input-group">
                    <input type="text" id="message" placeholder="Please enter a new task">
                </div>
                <div class="input-group">
                    <input type="button" id="btn" value="Add">
                </div>
            </div>
            <ul id="taskList">
            </ul>
        </div>
        <script src="resources/code.js" type="text/javascript"></script>
    </body>
</html>

Answer 1

您需要在media中进行一些CSS更改。

使用container将margin集中在小型设备上
为display: none中的#btn删除media query
使用flex对齐小型设备的add按钮
clearfix .input-group使用before和after

let task;
let text;
let addTask;
let list;
let taskNo = 0;
let remove;
let input = document.getElementById('message');
let btn = document.getElementById('btn');

input.addEventListener("keypress", function() {
    if (event.keyCode == 13) {
        if (input.value === "") {
            alert("Please enter a task!");
        } else {
            createTask();
        }
    }
});

btn.onclick = function() {
    if (input.value === "") {
        alert("Please enter a task!");
    } else {
        createTask();
    }
};

function createTask() {
    
    task = input.value;
    
    addTask = document.createElement('li');
   
    text = document.createTextNode(task);
    
    addTask.appendChild(text);
    
    addTask.classList.add("task");
    
    taskNo++;
    
    addTask.id = taskNo;
    
    document.getElementById("taskList").appendChild(addTask);
    
    input.value = "";
    
    let list = document.getElementsByClassName("task");
    
    [...list].forEach(b => {
        b.addEventListener("click", () => {
            remove = document.getElementById(b.id);
            remove.parentNode.removeChild(remove);
        });
    });
}

html, body{
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
    background-color: #29313d;
    color: white;
}

#container {
    width: 100%;
}

h1{
    text-align: center;
    font-size: 44px;
}

#input{
    margin: auto;
    text-align: center;
}

#message, #btn{
    display: inline-block;
    height: 100%;
    margin-top: 10px;
    padding: 0;
    float: left;
    -webkit-box-sizing: border-box;
}

#message{
    background-color: #333;
    color: white;
    border: 4px solid coral;
    padding-left: 10px;
    width: 75%;
    height: 50px;
    border-radius: 10px;
}

#btn{
    font-size: 20px;
    background-color: coral;
    border: 4px solid coral;
    color: black;
    margin-left: 5%;
    width: 20%;
    height: 50px;
    border-radius: 10px;
}

#btn:focus{
    outline: none;
}

#message:focus{
    outline: none;
}

#input{
    height: 50px;
    width: 400px;
}

#taskList{
    list-style-type: none;
    padding: 0;
    margin-top: 50px;
}

.task {
    margin: auto;
    width: 85%;
    margin-top: 5px;
    padding: 10px;
    border: 4px solid coral;
    background-color: #333;
    color: white;
    border-radius: 10px;
}

@media(max-width: 600px) {
    
    #container {
        width: 80%;
        margin: 0 auto; /* to align center */
    }
    
    h1{
        margin: auto;
    }
    
    #message{
        width: 100%;
    }
    
    #btn{
        /* display: none; */
    }
    
    
    .task{
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    
    /***  Additional css ***/
    .input-group.flex {
        display: flex;
        justify-content: center;
    }
    .input-group:before, .input-group:after {
        content: "";
        display: table;
        clear: both;
    }
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=10">
        <link href="resources/style.css" rel="stylesheet" type="text/css">
        <link href="resources/logo.png" rel="shortcut icon" type="image/png">
        <title>Jennis App</title>
    </head>
    <body>
        <div id="container">
            <h1>To Do List</h1>
            <div id="input">
                <div class="input-group">
                    <input type="text" id="message" placeholder="Please enter a new task">
                </div>
                <!-- Added one additional class -->
                <div class="input-group flex">
                    <input type="button" id="btn" value="Add">
                </div>
            </div>
            <ul id="taskList">
            </ul>
        </div>
        <script src="resources/code.js" type="text/javascript"></script>
    </body>
</html>

工作小提琴here

HTML元素在移动设备上无法正确对齐

1 个答案: