Question

我是HTML的新手。我一直在尝试为实践设计调查表。该代码位于以下链接：https://codepen.io/akshaykumar2002/pen/KGEVjB?editors=1100

当我尝试将列表添加到div元素（用作内联块）时，我看到在列表上方和下方添加了额外的空格。我不确定如何删除这些空格。

我已经为div（红色）和列表元素（绿色）添加了颜色。以下是屏幕截图：The image with the div(red) and the list(green)

这是HTML代码段：

<div class="row">
    <div class="left"><label id="language-label">Languages know<br>(Select all that apply):</label></div>
    <div class="right">
      <ul id="preference" style="list-style: none;">
        <li><input type="checkbox" name="language" value="C">C</input></li>
        <li><input type="checkbox" name="language" value="Java">Java</input></li>
      </ul>
    </div>
  </div>

以下是相应的CSS代码段：

.row {
  margin: 1px 1px 1px 1px;
  background-color: blue;
}

.left {
  display: inline-block;
  text-align: right;
  width: 40%;
  vertical-align: top;
}

.right {
  display: inline-block;
  width: 48%;
  text-align: left;
  background-color: red;
  vertical-align: center;
}
#preference {
  background-color: white;
}
li {
  display: block;
  background-color: green;
  position: relative;
  left: -35px;
}

请帮助我解决这个问题。

Answer 1

如果您只想删除列表顶部和底部添加的红色空格，只需添加margin：0即可；到#preference

#preference {
margin: 0;
background-color: white;
}

Answer 2

那是因为您给.row的所有边距留了1px。将.row更改为：

.row {
  margin: 0px 1px;
}

第一个属性用于顶部和底部，第二个属性用于左侧和右侧。

Answer 3

添加“显示：inline-flex; margin-top：2px； margin-bottom：2px”

Old:
      <ul id="preference" style="list-style: none;">

New:
      <ul id="preference" style="list-style: none;display: inline-flex;margin-top: 2px;margin-bottom: 2px">

https://codepen.io/shamshersandhu/pen/RedxrX

在包含列表的div中删除其他空间

3 个答案: