Question

所以我有这段代码：

<div class ="pagecontent-checkbox">
        <form action="">
            <input type="checkbox" name="vehicle" value="1">Smart Bridges<br>
            <input type="checkbox" name="vehicle" value="2">Smart Meters<br>
            <input type="checkbox" name="vehicle" value="3">Accounts Activated<br>
            <input type="checkbox" name="vehicle" value="4">Accounts Created<br>
            <input type="checkbox" name="vehicle" value="5">Always On Events<br>
            <input type="checkbox" name="vehicle" value="5">Monthly Efficiency Statistics<br>
            <input type="checkbox" name="vehicle" value="5">Efficiency Scores<br>
            <input type="checkbox" name="vehicle" value="5">Data Missing Statistics
        </form>
</div>

但输出如下：

我该如何解决？

我想要这样

[]智能桥梁 []智能仪表
等。

Answer 1

关于您拥有的输出，您期望的输出以及您提供给我的CSS：

COMPOSE_FILE=docker-compose.yml:docker-compose.test.yml

首先，input { display: block; float: left; clear: both; width: 70%; height: 25px; margin: 40px 0 0 92px; padding: 0 10px; background-color: rgba(111, 148, 178, 0.2); font-size: 1.083em; font-weight: 400; line-height: 1.38; color: rgb(0, 0, 0); }可能不是你想要的。只需删除此行。

然后，以下是您的display: block说明，我只留下弄乱一切的内容：

input

基本上，每一行都是随机的。此代码根本不适合您想要的表单。

如果此input { display: block; float: left; clear: both; width: 70%; height: 25px; margin: 40px 0 0 92px; padding: 0 10px; }有理由存在于您的CSS代码中，那么您应该以此特定形式指定input类到different个标记，并更改您的<input>在CSS中选择除此之外的每个表单。

<强> HTML

input

<强> CSS

<input class="different">

这样，带有input:not(.different) { /* stuff */ }类的表单输入将接收默认样式，这是您想要的。然后，您可以针对此特定形式改进此样式：

different

Answer 2

根据您在the chat中分享的信息，似乎对标记名为 input 的任何元素都有CSS规则，这适用于复选框。

width规则（即width: 70%）告诉复选框占据父容器宽度的70％。

此外，height规则（即height: 25px;）使每个复选框（实际上是围绕它的区域）更高， line-height 规则也是如此。

此外，display:block似乎没有帮助，除非你想要下面的复选框文本。如果文本应该在同一行。

float的规则似乎没有必要，因此删除该规则（以及clear）可能会有所帮助。

删除其中许多规则会导致复选框的布局类似于您想要的输出。看看下面的示例 - 根据需要重新添加样式。

＆＃13;

.pagecontent {
  float: left;
  clear: both;
  background-color: #ffffff;
  width: 90%;
  height: auto;
  margin: 65px 0 20px 60px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
  overflow: visible;
}
.pagecontent-right-column {
    width: 24%;
    float: right;
    padding-right: 5px;
    padding-top: 5px;
}

input {
  padding: 0 10px;
  background-color: rgba(111, 148, 178, 0.2);
  font-size: 1.083em;
  font-weight: 400;
  color: rgb(0, 0, 0);
}

＆＃13;

<div class="pagecontent">
    <div class="pagecontent-checkbox">
      <form action="">
        <input type="checkbox" name="vehicle" value="1">Smart Bridges
        <br>
        <input type="checkbox" name="vehicle" value="2">Smart Meters
        <br>
        <input type="checkbox" name="vehicle" value="3">Accounts Activated
        <br>
        <input type="checkbox" name="vehicle" value="4">Accounts Created
        <br>
        <input type="checkbox" name="vehicle" value="5">Always On Events
        <br>
        <input type="checkbox" name="vehicle" value="5">Monthly Efficiency Statistics
        <br>
        <input type="checkbox" name="vehicle" value="5">Efficiency Scores
        <br>
        <input type="checkbox" name="vehicle" value="5">Data Missing Statistics
      </form>
    </div>
    <div class="pagecontent-right-column">
      <!--{if {getUserMemberOfAdmin USERGROUPS=$management_user_groups} }-->
      <!--{*Selector for filter on labelpartner*}-->
      <!--{getAllLabelPartners}-->
      <div style="width: 80%; border: none; padding: 5px; margin-left: auto; margin-right: auto; margin-bottom: 5px;">
        <label for="Labelpartner_select">Filter charts on labelpartner</label>
        <!--{html_options id="Labelpartner_select" name="Labelpartner_select" options=$LabelpartnerList}-->
      </div>
    </div>
  </div>

＆＃13;

复选框未对齐

2 个答案: