Блог

Главная - Вопросы по программированию - Элементы HTML не будут правильно выровнены на мобильных устройствах

Элементы HTML не будут правильно выровнены на мобильных устройствах

#html #css

#HTML #css

Вопрос:

Элементы 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>

Ответ №1:

вам нужно внести некоторые изменения в css media .

  • Отцентрируйте 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>

здесь работает скрипка