字段集的内容正在移出图例容器

Question

我浏览了许多页面以查找我做错了什么，但是找不到任何有用的信息。所以问题是我在fieldset标签内的文本超出了边框。

这就是我想要的样子：

How it should look

How it looks actually

body {
  height: 660px;
  width: 400px;
  border-color: lightgrey;
  border-style: groove;
  border-width: 2px;
  border-radius: 10px;
}

fieldset {
  width: 50%;
  height: 60px;
  margin: auto;
}

<fieldset>
  <legend>Title</legend>
  <p>
    <input type="radio" id="Mister" name="Title" value="mister">
    <label for="Mister">Mister</label>
  </p>
  <p>
    <input type="radio" id="Miss" name="Title" value="miss">
    <label for="Miss">Miss</label>
  </p>
</fieldset>

Answer 1

段落通常具有默认边距。将它们归零：

body {
  height: 660px;
  width: 400px;
  border-color: lightgrey;
  border-style: groove;
  border-width: 2px;
  border-radius: 10px;
}

fieldset {
  width: 50%;
  height: 60px;
  margin: auto;
}

fieldset p {
  margin: 0;
}

<fieldset>
  <legend>Title</legend>
  <p>
    <input type="radio" id="Mister" name="Title" value="mister">
    <label for="Mister">Mister</label>
  </p>
  <p>
    <input type="radio" id="Miss" name="Title" value="miss">
    <label for="Miss">Miss</label>
  </p>
</fieldset>

Answer 2

在一个段落中尝试两个字段。像下面一样

   <fieldset>
       <legend>Title</legend>
        <p>
            <input type="radio" id="Mister" name="Title" value="mister">
            <label for="Mister">Mister</label>
            <input type="radio" id="Miss" name="Title" value="miss">
            <label for="Miss">Miss</label>
        </p>
    </fieldset>

Answer 3

这是吗？

body {
  height: 660px;
  width: 400px;
  border-color: lightgrey;
  border-style: groove;
  border-width: 2px;
  border-radius: 10px;
}

fieldset {
  width: 50%;
  height: 60px;
  margin: auto;
  position:relative;
}

fieldset p {
  position:absolute;
  top:10px;
  left:0px;
}

fieldset p:nth-child(2) {
  position:absolute;
  top:30px;
}

fieldset p input {
  position:absolute;
  left:10px;
  top:0px;
}

fieldset p label {
  position:absolute;
  left:35px;
  top:0px;
}

<fieldset>
  <legend>Title</legend>
  <p>
    <input type="radio" id="Mister" name="Title" value="mister">
    <label for="Mister">Mister</label>
  </p>
  <p>
    <input type="radio" id="Miss" name="Title" value="miss">
    <label for="Miss">Miss</label>
  </p>
</fieldset>

Answer 4

<p>段落

<p>标签应包含文本，而不是<input>标签。

• 删除所有<p>标签。
• 将每个<label>标签包裹在相应的<input>标签周围。

• 接下来，将以下规则集添加到样式表或<style>标签：

   label {
     display: block;
   }
  

---

演示

body {
  height: 660px;
  width: 400px;
  border-color: lightgrey;
  border-style: groove;
  border-width: 2px;
  border-radius: 10px;
}

fieldset {
  width: 50%;
  height: 60px;
  margin: auto;
}

label {
  display: block;
}

<fieldset>
  <legend>Title</legend>

  <label for="Mister">
    <input type="radio" id="Mister" name="Title" value="mister"> Mister
  </label>

  <label for="Miss">
    <input type="radio" id="Miss" name="Title" value="miss"> Miss
  </label>

</fieldset>