如何将按钮定位在ul的项目符号上方并将位置定位在输入元素的右侧？

Question

This is what I want to do:

I want the remove button to cover the bullet point of the ul li item. And I want the Add-Button to go next to the Worksheet-Problem input text. I would like less of a hard-coded pixel response because what I want to do ideally in the end is to be able to click on a Worksheet-Problem box and have the Remove-Button appear on the left of the box and the Add-Button appear on the right of the box.

I've been reading about display and I've tried a couple variations using float, flex, etc. to no avail. If someone could show me how to do this that would be great!

 /*import custom font*/ @import 'https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700,800,900'; .container-fluid { background-color: #86E1D8; } #Worksheet { background-color: white; font-family: 'Work Sans', sans-serif; margin-top: 50px; height: 95vh; border: none; /*Background shadow*/ -webkit-box-shadow: 1px 1px 13px 3px rgba(155, 155, 155, 1); -moz-box-shadow: 1px 1px 13px 3px rgba(155, 155, 155, 1); box-shadow: 1px 1px 13px 3px rgba(155, 155, 155, 1); } #Done-Button, #Add-Button, #Remove-Button { right: 20px; padding: 0; border: none; background: none; } #Add-Button, #Remove-Button {} #Done-Button { position: absolute; bottom: 20px; } ul li { font-size: 40px; /*To change bullet size*/ color: #9B9B9B; margin-left: 18px; } /*Get rid of that blue outline when click on buttons & input text*/ button:focus, input:focus { outline: 0; } /*Add borders when hover or click on input boxes*/ input { border: none; padding: 10px; } input:focus, input:hover { border: 1px solid #979797; border-radius: 8px; color: #4A4A4A; } /*Style input text boxes*/ input[type='text'][name='Worksheet-Name'] { font-size: 36px; margin-top: 20px; margin-left: 15px; } input[type='text'][name='Worksheet-Problem'] { font-size: 20px; } /*Change placeholder*/ input[type='text'][name='Worksheet-Name']::-webkit-input-placeholder { /* Chrome/Opera/Safari */ font-weight: 500; font-size: 36px; } input[type='text'][name='Worksheet-Name']::-moz-placeholder { /* Firefox 19+ */ font-weight: 500; font-size: 36px; } input[type='text'][name='Worksheet-Name']:-ms-input-placeholder { /* IE 10+ */ font-weight: 500; font-size: 36px; } input[type='text'][name='Worksheet-Name']:-moz-placeholder { /* Firefox 18- */ font-weight: 500; font-size: 36px; } /*Change placeholder*/ input[type='text'][name='Worksheet-Problem']::-webkit-input-placeholder { /* Chrome/Opera/Safari */ font-weight: 400; font-size: 20px; } input[type='text'][name='Worksheet-Problem']::-moz-placeholder { /* Firefox 19+ */ font-weight: 400; font-size: 20px; } input[type='text'][name='Worksheet-Problem']:-ms-input-placeholder { /* IE 10+ */ font-weight: 400; font-size: 20px; } input[type='text'][name='Worksheet-Problem']:-moz-placeholder { /* Firefox 18- */ font-weight: 400; font-size: 20px; } 

 <meta charset="utf-8"> <meta name="viewport" content="width=device-width, intial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <div class="container-fluid"> <div id="Worksheet" class="col-sm-10 col-sm-offset-1"> <form name="Worksheet"> <input type="text" name="Worksheet-Name" placeholder="Worksheet Name..." /> <ul class="row"> <li><input type="text" name="Worksheet-Problem" placeholder="29 - 4" /></li> <li><input type="text" name="Worksheet-Problem" placeholder="1900 + 97" /></li> <li><input type="text" name="Worksheet-Problem" placeholder="4 * 25" /></li> <li><input type="text" name="Worksheet-Problem" placeholder="Problem..." /></li> </ul> </form> <button id="Done-Button" type="button"> <img src="/images/Done%20Button.png" /> </button> <button id="Add-Button" type="button"> <img src="images/Add%20Button.png" /> </button> <button id="Remove-Button"> <img src="images/Remove%20Button.png" /> </button> </div> </div> 

Answer 1

You could use a div

 li { margin: 5px 0; width: 200px; position: relative; } .butt1 { position: absolute; text-align: center; display: inline-block; width: 22px; height: 22px; left: -25px; border-radius: 50%; background: red; } .butt2 { text-align: center; display: inline-block; vertical-align: middle; width: 22px; height: 22px; margin-left: 3px; border-radius: 50%; background: green; } 

 <ul class="row"> <li><div class="butt1"></div><input type="text" name="Worksheet-Problem" placeholder="29 - 4"/></li> <li><input type="text" name="Worksheet-Problem" placeholder="1900 + 97"/></li> <li><input type="text" name="Worksheet-Problem" placeholder="4 * 25"/></li> <li><input type="text" name="Worksheet-Problem" placeholder="Problem..."/><div class="butt2"></div></li> </ul> 

or before / after pseudo

 li { margin: 5px 0; width: 200px; position: relative; } li:nth-child(1)::before { content: ' '; position: absolute; text-align: center; display: inline-block; width: 22px; height: 22px; left: -25px; border-radius: 50%; background: red; } li:nth-child(4)::after { content: ' '; text-align: center; display: inline-block; vertical-align: middle; width: 22px; height: 22px; margin-left: 3px; border-radius: 50%; background: green; } 

 <ul class="row"> <li><input type="text" name="Worksheet-Problem" placeholder="29 - 4"/></li> <li><input type="text" name="Worksheet-Problem" placeholder="1900 + 97"/></li> <li><input type="text" name="Worksheet-Problem" placeholder="4 * 25"/></li> <li><input type="text" name="Worksheet-Problem" placeholder="Problem..."/></li> </ul>