Question

我目前正在研究前端Web开发，并且正处于为我的投资组合构建项目的阶段。

我目前正在待办事项列表网站上工作，我已经对大多数功能进行了编码，但是我却在CSS方面苦苦挣扎。

如果您可以向新手开发人员提供以下有关以下代码的反馈，我将不胜感激。

所以我今天要的是什么

我想像这样在文本的边框上放置一个图标：

<!DOCTYPE html>

<html lang="en">

    <head>

        <link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel="stylesheet" type="text/css">

        <link rel="stylesheet" type="text/css" href="css/style.css">

        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

        <title>Your To Do List</title>

    </head>

    <body>


           <!--ICON LINK 
    <i id="addItem" class="fas fa-plus-circle"></i> 
    -->
        <h1>Your todo list</h1>



        <div id="item-list">
            <label class="container">
                <input type="checkbox" checked="checked">
                <span class="checkMark"></span>

            </label>
        </div>
        <script src="js/script.js"></script>

    </body>

    </html>

我的JS：

var toDoItems = [];
var userInput; 
var checkBox;


document.getElementById("addItem").onclick = function (){

userInput = prompt("Enter your Todo: ")

toDoItems.push(userInput);

stylePara();


document.getElementById("item-list").insertAdjacentHTML('beforeend', stylePara());


}

function stylePara(){

var html = '';

html += '<label class="container">';

html += '<input type="checkBox">';

html += '<span class="checkMark"></span>';

html += '<span class="checkLabel">' + userInput + '</span>';

html += '</label>';

return html;



}

我的CSS：

@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:400,700');

* {

margin: 0;
padding: 0;
box-sizing: border-box;
}

body{

background: white;
}
h1{

text-align: center;
font-family: 'Roboto Slab', serif;
margin-top: 50px;
color: black;
margin-bottom: 35px;
text-decoration: underline;
}

h4{

text-align: center;
margin-top: 20px;
}

item-list {

width: 100%;
margin-left: 50%;
background-color: red;
display: inline-block;

}


.container {

width: 100%;
margin-left: 40%;
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.container input{

position: absolute;
opacity: 0;
cursor: pointer;
}

.checkMark {

position: absolute;
top: -5px;
left: 0;
height: 35px;
width: 35px;
background-color: black;
}

.container input:checked~.checkMark{

background-color: darkgreen;    
}

.checkLabel {

background: white;
margin-left: 20px;
color: white;
padding: 5px 20pxl
}

.container input:checked~.checkLabel{

text-decoration: line-through;
background: green;
color: blue;
padding: 5px 20px;
}

.checkMark:after{

content: "";
position: absolute;
display: none;
}

.container input:checked~.checkMark:after{

display: block;
top: 10px;
left: 15px;
}

.container .checkMark:after {

left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}

Answer 1

您可以使用绝对定位：

.your-class {
    position: absolute;
    top: 10px; /* space from top */
    right: 10px; /* space from right */
}

对于您的目的，顶部和右侧是：

记住要赋予父元素：

.position:relative;

然后，您的绝对位置将是定位到具有position：相对而不是整个页面的容器。示例代码：https://jsfiddle.net/2vaphyq3/12/

编辑：

但也许更干净的方法是使用:after之类的伪元素

Answer 2

这种方式应该可以工作。已添加到您现有的代码中。

 @import url('https://fonts.googleapis.com/css?family=Roboto+Slab:400,700');

    * {
    
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }

    body{
    
    background: white;
    }
    h1{
    
    
      text-align: left;
    font-family: 'Roboto Slab', serif;
    margin-top: 50px;
      padding: 10px;
    color: black;
    margin-bottom: 35px;
    }

    h4{
    
    text-align: center;
    margin-top: 20px;
    }

    item-list {
    
    width: 100%;
    margin-left: 50%;
    background-color: red;
    display: inline-block;

    }


    .container {
    
    width: 100%;
    margin-left: 40%;
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    }

    .container input{
    
    position: absolute;
    opacity: 0;
    cursor: pointer;
    }

    .checkMark {
    
    position: absolute;
    top: -5px;
    left: 0;
    height: 35px;
    width: 35px;
    background-color: black;
    }

    .container input:checked~.checkMark{
    
    background-color: darkgreen;    
    }

    .checkLabel {
    
    background: white;
    margin-left: 20px;
    color: white;
    padding: 5px 20pxl
    }

    .container input:checked~.checkLabel{
    
    text-decoration: line-through;
    background: green;
    color: blue;
    padding: 5px 20px;
    }

    .checkMark:after{
    
    content: "";
    position: absolute;
    display: none;
    }

    .container input:checked~.checkMark:after{
    
    display: block;
    top: 10px;
    left: 15px;
    }

    .container .checkMark:after {
    
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    }
    
    /*Added This*/
    .wholeItem {
      width: 400px;
      height: auto;
      }
    h1.todoL{
      position: relative;
      background: #c7c9d6;
      border-bottom: 1px solid #999;
    }
    .todoI {
      position: absolute;
      right: 25%;
      bottom: -25px;
      width: 50px;
      height: 50px;
      background: #da5048;
      border-radius: 50%;
      color: #fff;
      line-height: 50px;
      text-align: center;
      font-weight: light;
   }

<!DOCTYPE html>

<html lang="en">
    
    <head>
        
        <link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel="stylesheet" type="text/css">
        
        <link rel="stylesheet" type="text/css" href="css/style.css">
        
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
        
        <title>Your To Do List</title>
    
    </head>
    
    <body>
        
       
           <!--ICON LINK 
    <i id="addItem" class="fas fa-plus-circle"></i> 
    -->
    <div class="wholeItem">
        <h1 class='todoL'>Your todo list<div class="todoI">+</div></h1>
        
    
        
        <div id="item-list">
            <label class="container">
                <input type="checkbox" checked="checked">
                <span class="checkMark"></span>
            
            </label>
        </div>
        </div>
        <script src="js/script.js"></script>
        
    </body>

    </html>

在文字边框上放置一个图标-HTML CSS

2 个答案: