Wie mache ich meine Texteingabe am oberen Rand des Laptop-Bildschirm starten?

Dies ist ein "To-Do List" -Projekt, das ich in mein Portfolio aufnehmen möchte. Der in die Box getippte Text beginnt am unteren Rand und setzt jeden zusätzlichen To-Do-Text unter den letzten Text, so dass er nicht lesbar ist. Ich möchte, dass der Text oben auf dem Laptopbildschirm beginnt, der sich auf der Seite befindet. Bitte klicken Sie auf den Link und geben Sie einen beliebigen Text zweimal ein und Sie werden meinen Fehler sehen. https://nicoleirene.github.io/js-exercise-2/ Mein Code ist unten.Wie mache ich meine Texteingabe am oberen Rand des Laptop-Bildschirm starten?

HTML

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
     <link rel="stylesheet" href="css/style.css"> 
     <title>JS Exercise 2</title> 
    </head> 
    <body> 
     <h1>Lets Do This</h1> 
     <form> 

     <label for="user-input" >Type your to do:</label> 
     <div class="wrapper"> 
      <input type="text" name="user-input" id="user-input" placeholder="Enter To Do!"> 

      <button type="submit" id="user-submit">Add To Do!</button> 
     </div> 
     </form> 

     <ul id="to-do-list" class="to-do-list"> 

     </ul> 


     <!-- Make sure script is loaded at the bottom--> 
     <script src="js/app.js"></script> 
    </body> 
</html>

var userSubmit = document.querySelector('#user-submit'); 
var toDoList = document.querySelector('#to-do-list'); 
function addToDo(event){ 
    event.preventDefault(); 

    var userInput = document.querySelector('#user-input'); 


    if(userInput.value === ''){ 
     return false; 
    } 

    toDoList.innerHTML = '<li><i class="fa fa-window-close close-to-do" aria-hidden="true"></i>' + userInput.value + '</li>' + toDoList.innerHTML; 

    userInput.value = ''; 
} 

function removeToDo(event){ 
    if(event.target.classList.contains('close-to-do')) { 
     var li = event.target.parentElement; 
     toDoList.removeChild(li); 

    } 
} 

toDoList.addEventListener('click', removeToDo, false); 
userSubmit.addEventListener('click', addToDo, false);

CSS

@import url('https://fonts.googleapis.com/css?family=Raleway'); 
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
} 

body{ 
    font-family: 'Raleway', sans-serif; 
    background-color: #FFF; 
    background-image: url("../images/pixel-open-front.png"); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-position: center; 
    color: #000; 
} 
h1{ 
    text-align: center; 
    padding:; 
    background-color: blue; 
    color:#FFF; 
} 
label{ 
    display: block; 
    margin:right; 
    text-align: center; 
    background-color: red; 
    color:white; 
} 
input{ 
    /*display:block; 
    margin:auto;*/ 
} 
.wrapper{ 
    text-align: center; 
} 
button{ 
    color:white; 
    background-color:red; 
    border:none; 
    padding: 5px; 
    margin-top: 5px; 

} 
ul{ 
    text-align: center; 
    padding: 300px; 
    list-style: none; 
    color:red; 
} 
.close-to-do{ 
    display: inline-block; 
    margin-right: 10px; 
}

Quelle

2017-08-07 Nicole Irene

padding 300px von ul verursacht es Mitte des Bildschirms angezeigt werden, ändern Sie es auf 250px –

Ich habe die ul Wattierung 100 Pixel so ist es, wo ich will , ich danke dir sehr! –

Ich habe meinen Kommentar als Antwort gemacht, wenn es hilfreich ist .. bitte markieren Sie es als Antwort :) –

Ich würde es anders einrichten. Die Polsterung kann bei verschiedenen Bildschirmgrößen zu Problemen führen. Unten stelle ich den Laptop als Hintergrund für die Liste.

var userSubmit = document.querySelector('#user-submit'); 
 
var toDoList = document.querySelector('#to-do-list'); 
 

 
function addToDo(event) { 
 
    event.preventDefault(); 
 

 
    var userInput = document.querySelector('#user-input'); 
 

 

 
    if (userInput.value === '') { 
 
    return false; 
 
    } 
 

 
    toDoList.innerHTML = '<li><i class="fa fa-window-close close-to-do" aria-hidden="true"></i>' + userInput.value + '</li>' + toDoList.innerHTML; 
 

 
    userInput.value = ''; 
 
} 
 

 
function removeToDo(event) { 
 
    if (event.target.classList.contains('close-to-do')) { 
 
    var li = event.target.parentElement; 
 
    toDoList.removeChild(li); 
 

 
    } 
 
} 
 

 
toDoList.addEventListener('click', removeToDo, false); 
 
userSubmit.addEventListener('click', addToDo, false);

@import url('https://fonts.googleapis.com/css?family=Raleway'); 
 
* { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body { 
 
    font-family: 'Raleway', sans-serif; 
 
    background-color: #FFF; 
 
    color: #000; 
 
} 
 

 
h1 { 
 
    text-align: center; 
 
    padding: ; 
 
    background-color: blue; 
 
    color: #FFF; 
 
} 
 

 
label { 
 
    display: block; 
 
    margin: right; 
 
    text-align: center; 
 
    background-color: red; 
 
    color: white; 
 
} 
 

 
input { 
 
    /*display:block; 
 
    margin:auto;*/ 
 
} 
 

 
.wrapper { 
 
    text-align: center; 
 
} 
 

 
button { 
 
    color: white; 
 
    background-color: red; 
 
    border: none; 
 
    padding: 5px; 
 
    margin-top: 5px; 
 
} 
 

 
ul { 
 
    text-align: center; 
 
    padding-top: 100px; /* same as top background */ 
 
    list-style: none; 
 
    color: red; 
 
} 
 

 
ul:before { 
 
    content: url(https://nicoleirene.github.io/js-exercise-2/images/pixel-open-front.png); 
 
    position: absolute; 
 
    top: 100px; /* same as padding top */ 
 
    left: 80px; 
 
} 
 

 
.close-to-do { 
 
    display: inline-block; 
 
    margin-right: 10px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
<h1>Lets Do This</h1> 
 
<form> 
 
    <label for="user-input">Type your to do:</label> 
 
    <div class="wrapper"> 
 
    <input type="text" name="user-input" id="user-input" placeholder="Enter To Do!"> 
 

 
    <button type="submit" id="user-submit">Add To Do!</button> 
 
    </div> 
 
</form> 
 
<ul id="to-do-list" class="to-do-list"></ul>

Quelle

2017-08-07 15:02:57 Gerard

Wie in meinen Kommentaren erwähnt, padding auf Ul Element verursacht es in der Mitte des Bildschirms angezeigt werden soll.

Pads anpassen, um das Problem zu beheben.

Für Responsive Design, bitte Medienabfragen verwenden, um Text anzuzeigen richtig

Quelle

2017-08-07 15:13:26

Wie mache ich meine Texteingabe am oberen Rand des Laptop-Bildschirm starten?

Antwort

Verwandte Themen