css - 以行定位复选框，例如 4 个 CSS

Question

如何使用 css 将我的复选框定位在行中，比如说 4。现在，所有内容都显示在一行中。

我尝试使用浮动左侧和边距，但它没有按照我的方式工作。

我的表格中有 7 组列表，如下所示

HTML：

<div class="Oobj" id="Oobj60">
<form action="mailto:kontakt@2know.pl" method="post" enctype="text/plain">

<div id="Oobj58">
    <input type="checkbox" onClick="toggle(this)" /><br>

    <input type="checkbox" name="sport" value="fitness" />fitness<br />
    <input type="checkbox" name="sport" value="gym" />siłownia<br />
    <input type="checkbox" name="sport" value="siata" />siatkówka<br />
    <input type="checkbox" name="sport" value="noga" />piłka nożna<br />
    <input type="checkbox" name="sport" value="kosz" />koszykówka<br />
    <input type="checkbox" name="sport" value="zima" />sporty zimowe<br />


    </div>

    </form> </div>

CSS：

#Oobj58 {
  position: absolute;
  font-size: 13px;
  font-family: Open Sans;
  z-index: 43;
  text-align: left;
  left: 12.25em;
  top: 23.00em;
  display: none;

}

'Oobj' 类为空。我需要它用于另一个 jq 代码。

Answer 1

尝试这个

<div class="Oobj" id="Oobj60">
<form action="mailto:kontakt@2know.pl" method="post" enctype="text/plain">

<div id="Oobj58">

<ul>
    <li> <input type="checkbox" name="sport" value="fitness"  />fitness </li>
   <li> <input type="checkbox" name="sport" value="gym" />siłownia</li>
   <li> <input type="checkbox" name="sport" value="siata" />siatkówka</li>
   <li> <input type="checkbox" name="sport" value="noga" />piłka nożna</li>
   <li> <input type="checkbox" name="sport" value="kosz" />koszykówka</li>
   <li> <input type="checkbox" name="sport" value="zima" />sporty zimowe</li>
    </ul>

    </div>

    </form> </div>



#Oobj58 {

  font-size: 13px;
  font-family: Open Sans;

  text-align: left;
  left: 12.25em;
  top: 23.00em;

}
#Oobj58 ul li { display:inline; margin-left:10px; }