Question

我希望其他输入的输入大小为100％而不是复选框，因此我将内联max-width设为复选框。但它不起作用。

#application-form label {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  vertical-align: top;
}

#application-form input,
#application-form select {
  display: inline-block;
  min-width: 100%;
  margin-bottom: 10px;
  background-color: #fafafa;
  box-sizing: border-box;
  vertical-align: top;
}

<label>
  <input type="checkbox" name="agree" id="checkbox-agree" required style="max-width: 3%">
  <span style="float: left;">I have read and agree to the Credit Guide & Quote and the Privacy Policy & Consent</span>
</label>

以下是live版本。

Answer 1

将样式应用于输入时，不要选中该复选框。我还添加了应用程序表单ID，因此如果你没有删除你的内联css，那么复选框实际上看起来是100％。关键是

#application-form input:not([type=checkbox])

文档在这里https://developer.mozilla.org/en-US/docs/Web/CSS/:not

：not（）CSS伪类表示与a不匹配的元素选择者列表。因为它可以防止特定物品的存在选中，它被称为否定伪类。

#application-form label {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  vertical-align: top;
}

#application-form input:not([type=checkbox]),
#application-form select {
  display: inline-block;
  min-width: 100%;
  margin-bottom: 10px;
  background-color: #fafafa;
  box-sizing: border-box;
  vertical-align: top;
}

<div id="application-form">
  <label>
    <input type="checkbox" name="agree" id="checkbox-agree" required>
    <span style="float: left;">I have read and agree to the Credit Guide & Quote and the Privacy Policy & Consent</span>
  </label>
</div>

Answer 2

你可以试试这个，

＆＃13;

<label style="display:inline;"> <input id="checkbox-agree" style="display:inline-block" name="agree" required="" type="checkbox" /> <span style="display:inline-block;width:50%;vertical-align:top;">I have read and agree to the Credit Guide &amp; Quote and the Privacy Policy &amp; Consent</span> </label>

＆＃13;

建议 - 使用class或ID添加CSS。避免使用内联CSS :-)

Answer 3

你可以使用flexboxes

＆＃13;

label {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}

＆＃13;

<label>
	<span >I have read and agree to the Credit Guide & Quote and the Privacy Policy & Consent</span>
    <input type="checkbox" name="agree" id="checkbox-agree" required>
</label>

＆＃13;

复选框占用宽度的100％

3 个答案: