文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使文本输入从膝上型计算机图像屏幕顶部开始

问如何使文本输入从膝上型计算机图像屏幕顶部开始
EN

Stack Overflow用户

提问于 2017-08-07 14:44:01

回答 2查看 190关注 0票数 2

这是一个‘待办事项清单’项目，我想包括在我的投资组合。输入框中的文本从底部开始，并将每一个附加的“待办”文本都放在最后一个下面，这样就看不清了。我希望文本从页面上笔记本电脑屏幕的顶部开始。请单击该链接并输入任何文本两次，您将看到我的错误。https://nicoleirene.github.io/js-exercise-2/我的代码在下面。

<!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')；*{框大小:边框-框；边距: 0；} body{字体-系列：'Raleway'，sans-serif；背景颜色：#FFF；背景-图像:url(“../图像/像素-打开-Front.png”)；背景-重复:不重复；背景-位置:中心；颜色：#000；} h1{文本对齐:中心；填充：；背景颜色:蓝色；color:#FFF；}标签{显示:块；边距:右；文本对齐:中心；背景颜色:红色；颜色:白色；}输入{ /*display:block；边距:自动；*/} .wrapper{文本对齐:中心；}按钮{颜色:白色；背景颜色:红色；边框:无；填充: 5px；边距-顶部:5 5px；} ul{文本-对齐:中心；填充:300 5px；列表样式:无；颜色:红色；}.关闭操作{显示:内联块；边距-右:10 to；}

javascript

html

css

回答 2

Stack Overflow用户

发布于 2017-08-07 15:02:57

我会以不同的方式设置它。填充可能会导致不同屏幕大小的问题。下面我把笔记本电脑作为列表的背景。

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>

票数 0

Stack Overflow用户

发布于 2017-08-07 15:13:26

正如我在注释中提到的，Ul元素上的填充导致它显示在屏幕的中间。

调整填充物以解决问题。

对于响应性设计，请使用媒体查询正确显示文本。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45549680

复制

相似问题

问如何使文本输入从膝上型计算机图像屏幕顶部开始
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使文本输入从膝上型计算机图像屏幕顶部开始EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使文本输入从膝上型计算机图像屏幕顶部开始
EN