Question

这就是我想要做的事情：

我希望删除按钮覆盖ul li项目的项目符号点。我希望Add-Button旁边的Worksheet-Problem输入文字。我想要较少的硬编码像素响应，因为我最终想要做的就是能够点击Worksheet-Problem box并让Remove-Button出现在框的左侧， Add-Button出现在框的右侧。

我一直在阅读有关显示器的内容，并且我尝试了使用float，flex等几种变体，但无济于事。如果有人能告诉我如何做到这一点会很棒！

/*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

您可以使用div

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

或before / after伪

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

如何将按钮放在ul li的子弹上并将按钮位置放在输入元件的右边？

1 个答案: