Question

我希望在列表项的右侧和左侧有一个边距，因此为什么我创建了＆＃34;包装＆＃34;，有人可以弄清楚为什么它从中心开始而不是从左边开始正确？

这里有一个jsfiddle：http://jsfiddle.net/vd8rb51s/

＆＃13;

.add-remove-skills {
  position: relative;
  float: right;
  display: block;
  border: 2px solid #d1d9de;
  border-radius: 4px;
  width: 287px;
  height: 394px
}
ul.edit-skills {
}
ul.edit-skills li {
  display: block;
  margin: 0;
  padding: 10px;
  text-align: left;
  background: #000;
  margin-bottom: 15px
}
.skills-wrapper {
  width: 267px;
  margin: 0 auto
}
h3.manage-skills {
  font-weight: 700;
  font-size: 16px;
  width: 100%;
  padding: 15px;
  margin-top: 0;
  border-bottom: 2px solid #d1d9de
}
input.add-skill {
  position: absolute;
  font-size: 16px;
  bottom: 0;
  width: 100%;
  height: 40px;
  text-indent: 10px;
  font-weight: 700;
  border: none;
  border-top: 2px solid #d1d9de
}
input.add-skill::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #939fa7;
  font-weight: 500
}
input.add-skill:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #939fa7;
  font-weight: 500;
  opacity: 1
}
input.add-skill::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #939fa7;
  font-weight: 500;
  opacity: 1
}
input.add-skill:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #939fa7;
  font-weight: 500
}

＆＃13;

<div class="add-remove-skills">
  <h3 class="manage-skills">Manage skills</h3>
  <div class="skills-wrapper">
    <ul class="edit-skills">
      <li>Skill number one</li>
      <li>Skill number two</li>
      <li>Skill number three</li>
    </ul>
  </div>
  <input class="add-skill" placeholder="Add new skill here" type="text">
</div>

＆＃13;

Answer 1

默认情况下，大多数浏览器会向padding-left元素添加一些ul元素。只需删除它：

.edit-skills {
  padding-left: 0;
}

.add-remove-skills {
  position: relative;
  float: right;
  display: block;
  border: 2px solid #d1d9de;
  border-radius: 4px;
  width: 287px;
  height: 394px;
}
ul.edit-skills {
  padding-left: 0;
}
ul.edit-skills li {
  display: block;
  margin: 0;
  padding: 10px;
  text-align: left;
  background: #000;
  margin-bottom: 15px;
}
.skills-wrapper {
  width: 267px;
  margin: 0 auto;
}
h3.manage-skills {
  font-weight: 700;
  font-size: 16px; 
  width: 100%;
  padding: 15px;
  margin-top: 0;
  border-bottom: 2px solid #d1d9de;
}
input.add-skill {
  position: absolute;
  font-size: 16px;
  bottom: 0;
  width: 100%;
  height: 40px;
  text-indent: 10px;
  font-weight: 700;
  border: none;
  border-top: 2px solid #d1d9de;
}
input.add-skill::-webkit-input-placeholder { /* WebKit browsers */
  color:    #939fa7;
  font-weight: 500;
}
input.add-skill:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color:    #939fa7;
  font-weight: 500;
  opacity:  1;
}
input.add-skill::-moz-placeholder { /* Mozilla Firefox 19+ */
  color:    #939fa7;
  font-weight: 500;
  opacity:  1;
}
input.add-skill:-ms-input-placeholder { /* Internet Explorer 10+ */
  color:    #939fa7;
  font-weight: 500;
}

<div class="add-remove-skills">
  <h3 class="manage-skills">Manage skills</h3>
  <div class="skills-wrapper">
    <ul class="edit-skills">
      <li>Skill number one</li>
      <li>Skill number two</li>
      <li>Skill number three</li>
    </ul>
  </div>
  <input type="text" class="add-skill" placeholder="Add new skill here">
</div>

Answer 2

无序列表具有默认缩进/填充，以便子弹不会在列表本身之外结束。

通常情况下，CSS重置样式表会解决这种问题。它将包含以下内容： ul {margin：0;填充：0; }

或者你可以在你的情况下申请 ul.edit-skills {margin：0;填充：0; }

从框中间开始的列表项

2 个答案: