Question

我正在尝试在清单周围创建边框，但是我不确定如何编写CSS。.目前，边框围绕着所有内容..我附上了一个屏幕截图，向您展示了我的意思。黑色边框是我要得到的，红色边框是我在油漆中添加的内容，以向您展示我正在尝试做的事情。任何帮助将不胜感激。

使用imgbb.com上传的图片

我的HTML左侧的“主题列表”和中心清单

<div class="notes">
    <h2 class="subject">Subject Notes</h2>
        <ul>
            <li><a href="htmlnotes.html">HTML</a></li>
            <li><a href="cssnotes.html">CSS</a></li>
            <li><a href="javanotes.html">JavaScript</a></li>
            <li><a href="rubynotes.html">Ruby</a></li>
            <li><a href="railsnotes.html">Ruby on Rails</a></li>
            <li><a href="jquerynotes.html">jQuery</a></li>
        </ul>
</div>


<div class="checklist">
<h2>To Do List</h2>
<!-- To do list with check box as a test -->

        <form>
            <input type="checkbox" name="list" value="">data</input><br>
            <input type="checkbox" name="list" value="">data</input><br>
            <input type="checkbox" name="list" value="">data</input><br>
            <input type="checkbox" name="list" value="">data</input><br>
            <input type="checkbox" name="list" value="">data</input><br>
            <input type="checkbox" name="list" value="">data</input><br>
            <input type="checkbox" name="list" value="">data</input><br>
            <input type="checkbox" name="list" value="">data</input><br>
            <input type="checkbox" name="list" value="">data</input><br>
            <input type="checkbox" name="list" value="">data</input><br>
            <input type="checkbox" name="list" value="">data</input><br>
        </form>
</div>

我的CSS左侧的“主题注释”和中央清单。

.notes ul {
    position: absolute;
    list-style-type: none;
    margin: 0 0;
    padding: 0;
    overflow: hidden;
    }

.notes {
    position: absolute;
    top: 160px;
}

.notes ul li {
    margin: 10px;

}

.notes li a{
    text-decoration: underline;
    color: #493C3D;

}


.checklist {
    position: relative;
    text-align: center;
    border-style: solid;
    border-width: 5px;
}

Answer 1

尝试一下。您已犯了很多错误，我已予以纠正。请检查。

.notes ul {
  position: absolute;
  list-style-type: none;
  margin: 0 0;
  padding: 0;
  overflow: hidden;
}

.notes {
  /* position: absolute; */
  /* top: 160px; */
  float: left;
}

.wrap {
  text-align: center;
}

.notes ul li {
  margin: 10px;
}

.notes li a {
  text-decoration: underline;
  color: #493C3D;
}

.checklist {
  position: relative;
  text-align: center;
  border-style: solid;
  border-width: 5px;
  display: inline-block;
}

<div class="wrap">
    <div class="notes">
        <h2 class="subject">Subject Notes</h2>
        <ul>
            <li><a href="htmlnotes.html">HTML</a></li>
            <li><a href="cssnotes.html">CSS</a></li>
            <li><a href="javanotes.html">JavaScript</a></li>
            <li><a href="rubynotes.html">Ruby</a></li>
            <li><a href="railsnotes.html">Ruby on Rails</a></li>
            <li><a href="jquerynotes.html">jQuery</a></li>
        </ul>
    </div>

    <div class="checklist">
        <h2>To Do List</h2>
        <!-- To do list with check box as a test -->

        <form>
            <input type="checkbox" name="list" value="" />data
            <br>
            <input type="checkbox" name="list" value="" />data
            <br>
            <input type="checkbox" name="list" value="" />data
            <br>
            <input type="checkbox" name="list" value="" />data
            <br>
            <input type="checkbox" name="list" value="" />data
            <br>
            <input type="checkbox" name="list" value="" />data
            <br>
            <input type="checkbox" name="list" value="" />data
            <br>
            <input type="checkbox" name="list" value="" />data
            <br>
            <input type="checkbox" name="list" value="" />data
            <br>
            <input type="checkbox" name="list" value="" />data
            <br>
            <input type="checkbox" name="list" value="" />data
            <br>
        </form>
    </div>
</div>

Answer 2

我将宽度添加到清单：

<div class="notes">
    <h2 class="subject">Subject Notes</h2>
        <ul>
            <li><a href="htmlnotes.html">HTML</a></li>
            <li><a href="cssnotes.html">CSS</a></li>
            <li><a href="javanotes.html">JavaScript</a></li>
            <li><a href="rubynotes.html">Ruby</a></li>
            <li><a href="railsnotes.html">Ruby on Rails</a></li>
            <li><a href="jquerynotes.html">jQuery</a></li>
        </ul>
</div>


<div class="checklist">
<h2>To Do List</h2>
<!-- To do list with check box as a test -->

        <form>
          <div class="checklist_wrapper">
          <input type="checkbox" name="list" value="">data</input><br>
            <input type="checkbox" name="list" value="">data</input><br>
            <input type="checkbox" name="list" value="">data</input><br>
            <input type="checkbox" name="list" value="">data</input><br>
            <input type="checkbox" name="list" value="">data</input><br>
            <input type="checkbox" name="list" value="">data</input><br>
            <input type="checkbox" name="list" value="">data</input><br>
            <input type="checkbox" name="list" value="">data</input><br>
            <input type="checkbox" name="list" value="">data</input><br>
            <input type="checkbox" name="list" value="">data</input><br>
            <input type="checkbox" name="list" value="">data</input><br>
          </div>

        </form>
</div>

.notes ul {
    position: absolute;
    list-style-type: none;
    margin: 0 0;
    padding: 0;
    overflow: hidden;
    }

.notes {
    position: absolute;
    top: 50px;
}

.notes ul li {
    margin: 10px;

}

.notes li a{
    text-decoration: underline;
    color: #493C3D;

}


.checklist {
    position: relative;
    text-align: center;
    border-style: solid;
    border-width: 5px;
    margin:0 auto;
    border:1px solid red;
    width:40%;
}

如何使用CSS在表单周围放置边框？

2 个答案: