Question

<p>
  <input type="text"/>
  <input type="text"/>
</p>
<p> 
  <input type="text"/>
</p>

所以我有两个段落，我想知道是否可以将第二段的宽度设置为正常宽度的2倍，以便与之前宽度更长的段落相同由于有两个输入框。

Answer 1

<p>元素默认宽度为100％，无论它是什么，除非您为其定义宽度或通过应用{{1}使其成为inline元素}或display: inline

您似乎想要拉伸输入bos，而不是display: inline-block标签？这是通过p标记中的size属性（在HTML代码中）

完成的

Answer 2

使用：nth-child（2）通过这种方式，您可以设置段落的所有特征，并使用：nth-child设置宽度。

<!DOCTYPE html>
<html>
<head>
<style> 
  p {
    width: 100px;
    background: red;
  }
  p:nth-child(2) {
    width: 200px;
  }
</style>
</head>
<body>
<p>The first paragraph.</p>
<p>The second paragraph.</p>

<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :nth-child() selector.</p>

</body>
</html>

Answer 3

您可以使用table标记仅放置两个段落。具有最长宽度的表格单元格将调整所有其他单元格的宽度。由于提到第一段是最长的，请参阅下面的代码段

注意：第1段p1有一个红色边框，宽度为370px

td {
  border: solid black 1px;
}

#p1 {
  display: inline-block;
  width: 370px;
  border: solid red;
}
#p2{
  border: solid blue;
}

<table>
  <tr>
    <td>
      <p id="p1">
        <input type="text" />p1
        <input type="text" />270px
      </p>
    </td>

  </tr>
  <tr>
    <td>
      <p id="p2">
        <input type="text"/>p2
      </p>
    </td>

  </tr>
</table>

将段落宽度设置为默认大小的2倍

3 个答案: