如何對齊文本旁邊的復選框

Question

我在對齊文本旁邊的復選框時遇到問題。

我正在開發一個簡單的待辦事項清單應用程序。 我使用JavaScript創建了段落元素，並使用了span元素創建了復選框。

CSS的listElement id源自JavaScript ，其中將段落元素id設置為listElement

這是我的目標：

這是我到目前為止的內容：

 var toDoItems = []; var i = 1; var userInput; var listElement; var checkBox; document.getElementById("addItem").onclick = function() { userInput = prompt("Enter your Todo: ") toDoItems.push(userInput); stylePara(); document.getElementById("item-list"). append(listElement); } function stylePara() { listElement = document.createElement("p"); listElement.id = "listElement"; listElement.innerHTML = userInput; } 

 #listElement { width: 500px; background: red; margin: 0 auto; border: 1px solid green; color: white; text-align: center; text-transform: capitalize; padding: 20px; } 

 <link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel="stylesheet" type="text/css"> <h1>My Tasks</h1> <h4><span id="number1"></span> tasks</h4> <button id="addItem">Add item</button> <div id="item-list"> <span><input type="checkbox" id="checkbox"></span> </div> 

Answer 1

好。 播放此片段，我想您會喜歡的。

我基於這個想法 ：

• 真正的復選框仍然不可見

• 還有另一個可見的樣式化的復選框（檢查實際上是一個旋轉角度），它會根據實際復選框的狀態更改其樣式

也：

• 您沒有使用javascript創建復選框，僅創建了標簽
• 我更改了您的JavaScript：現在，它形成了適當的html，並使用insertAdjacentHTML（）方法將其注入
• 當未選中時，我還添加了交叉效果

 var toDoItems = []; var i = 1; var userInput; var listElement; var checkBox; document.getElementById("addItem").onclick = function() { userInput = prompt("Enter your Todo: ") toDoItems.push(userInput); 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; } 

 /* The container */ .container { width: 100%; margin-left: 40%; /*this is the general left margin*/ 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; } /* Hide the browser's default checkbox */ .container input { position: absolute; opacity: 0; cursor: pointer; } /* Create a custom checkbox */ .checkmark { position: absolute; top: -5px; left: 0; height: 35px; width: 35px; background-color: #eee; } /* On mouse-over, add a grey background color */ .container:hover input~.checkmark { background-color: #ccc; } /* When the checkbox is checked, add a green background */ .container input:checked~.checkmark { background-color: darkgreen; } /* label when unchecked */ .checklabel { background: red; color: white; padding: 5px 20px; } /* label when checked */ .container input:checked~.checklabel { text-decoration: line-through; background: green; color: white; padding: 5px 20px; } /* Create the checkmark/indicator (hidden when not checked) */ .checkmark:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */ .container input:checked~.checkmark:after { display: block; top: 10px; left: 15px } /* Style the checkmark/indicator */ .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); } 

 <h1>To do list</h1> <button id="addItem">Add item</button> <div id="item-list"> <label class="container"> <input type="checkbox" checked="checked"> <span class="checkmark"></span> <span class="checklabel">Example item</span> </label> </div> 

Answer 2

.input-container {
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  margin-bottom: 15px;
}

.icon {
  padding: 10px;
  background: dodgerblue;
  color: white;
  min-width: 50px;
  text-align: center;
}

.input-field {
  width: 100%;
  padding: 10px;
  outline: none;
}

使用CSS可以更輕松地對齊頁面上的項目。 請參閱W3Schools教程-簡單易懂的https://www.w3schools.com/howto/howto_css_form_icon.asp

Answer 3

您可以為此使用復選框黑客

 .check { width: 30px; height: 30px; background-color: red; display: inline-block; } .text { display: inline-block; height: 30px; line-height: 30px; vertical-align: top; padding: 0 5px; } input[type="checkbox"] { display: none; } input[type="checkbox"]:checked + label { background-color: black; } input[type="checkbox"]:checked ~ .text { background-color: #0f0; color: white; text-decoration: line-through; } 

 <input type="checkbox" id="a" /> <label class="check" for="a"></label><div class="text">Get shit done</div> 

Answer 4

從最小的標記和CSS開始，然后添加您自己的樣式。

 .item { align-items: center; display: flex; } /* Sample custom styles. */ .item p { background: red; color: white; font-size: 20px; } 

 <div> <div class="item"> <input type="checkbox"> <p>Item 1</p> </div> <div class="item"> <input type="checkbox"> <p>Item 2</p> </div> </div> 

無論您的自定義樣式如何，它們始終將保持一致。