Html 如何使用CSS在表单周围添加边框？

我试图在我的清单周围创建一个边框，但我不确定如何编写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>

这是你想要的吗

我用一个

div

包装了检查表，使其

位置：inline block

，然后添加了一个红色边框

.notes ul{
位置：绝对位置；
列表样式类型：无；
利润率：0；
填充：0；
溢出：隐藏；
}
.注释{
位置：绝对位置；
顶部：10px；
}
李国宝博士{
利润率：10px；
}
李安{
文字装饰：下划线；
颜色：#493C3D；
}
.检查表{
位置：相对位置；
文本对齐：居中；
边框样式：实心；
边框宽度：5px；
}
.家长{
显示：内联块；
边框：2倍纯红；
填充：5px30px；
}

主题注释








待办事项清单
数据

数据

数据

数据

数据

数据

数据

数据

数据

这就是你想要的吗

我用一个

div

包装了检查表，使其

位置：inline block

，然后添加了一个红色边框

.notes ul{
位置：绝对位置；
列表样式类型：无；
利润率：0；
填充：0；
溢出：隐藏；
}
.注释{
位置：绝对位置；
顶部：10px；
}
李国宝博士{
利润率：10px；
}
李安{
文字装饰：下划线；
颜色：#493C3D；
}
.检查表{
位置：相对位置；
文本对齐：居中；
边框样式：实心；
边框宽度：5px；
}
.家长{
显示：内联块；
边框：2倍纯红；
填充：5px30px；
}

主题注释








待办事项清单
数据

数据

数据

数据

数据

数据

数据

数据

数据

试试这个。你犯了很多错误，我已经改正了。请查收

.notes ul{
位置：绝对位置；
列表样式类型：无；
利润率：0；
填充：0；
溢出：隐藏；
}
.注释{
/*位置：绝对位置*/
/*顶部：160px*/
浮动：左；
}
.包裹{
文本对齐：居中；
}
李国宝博士{
利润率：10px；
}
李安{
文字装饰：下划线；
颜色：#493C3D；
}
.检查表{
位置：相对位置；
文本对齐：居中；
边框样式：实心；
边框宽度：5px；
显示：内联块；
}

主题注释








待办事项清单
数据


数据


数据


数据


数据


数据


数据


数据


数据


数据


数据

试试这个。你犯了很多错误，我已经改正了。请查收

.notes ul{
位置：绝对位置；
列表样式类型：无；
利润率：0；
填充：0；
溢出：隐藏；
}
.注释{
/*位置：绝对位置*/
/*顶部：160px*/
浮动：左；
}
.包裹{
文本对齐：居中；
}
李国宝博士{
利润率：10px；
}
李安{
文字装饰：下划线；
颜色：#493C3D；
}
.检查表{
位置：相对位置；
文本对齐：居中；
边框样式：实心；
边框宽度：5px；
显示：内联块；
}

主题注释








待办事项清单
数据


数据


数据


数据


数据


数据


数据


数据


数据


数据


数据

我将宽度添加到检查表中：

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

主题注释








待办事项清单
数据

数据

数据

数据

数据

数据

数据

数据

数据

数据

数据

.notes ul{
位置：绝对位置；
列表样式类型：无；
利润率：0；
填充：0；
溢出：隐藏；
}
.注释{
位置：绝对位置；
顶部：50px；
}
李国宝博士{
利润率：10px；
}
李安{
文字装饰：下划线；
颜色：#493C3D；
}
.检查表{
位置：相对位置；
文本对齐：居中；
边框样式：实心；
边框宽度：5px；
保证金：0自动；
边框：1px纯红；
宽度：40%；
}

我将宽度添加到检查表中：

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

主题注释








待办事项清单
数据

数据

数据

数据

数据

数据