Question

我正在尝试水平对齐黄色搜索栏on this page下拉列表上方的复选框。

我认为内联块CSS可能是正确的方法，但我似乎无法让它工作。

如果您对最佳方法有任何建议，我将非常感激吗？

谢谢！

Answer 1

ul.categorychecklist li {
 display: inline-block;
}

在CSS文件中添加此代码，以使内联复选框。

Answer 2

是显示内联块是执行此操作的正确方法。但你必须在正确的地方添加它请在您的CSS中添加此内容

 .categorychecklist li {
        display: inline-block;
    }

Answer 3

试试这个：此代码会使您的复选框水平。

ul.categorychecklist {
        list-style: none;
        margin: 0;
        padding: 0;
}
ul.categorychecklist li {
     float: left;
     padding-right: 10px;
}

Answer 4

另一个选择

.popular-category {
    display: inline; 
}

您可能还想在上面添加padding-right: 15px;

Answer 5

对于前。通过做：

            httpClient = new HttpClient();
            httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", authenticationModel.AccessToken);
            string apicontent = await httpClient.GetStringAsync("https://{host}.azurewebsites.net/home/GetInfo");
            apicontent.ToString();

Answer 6

你也可以使用float制作技巧，正如你在这个小提琴中看到的那样：

https://jsfiddle.net/v7thvxjj/2

注意：请记住从HTML代码中删除空ul

Answer 7

您的代码将如下所示

 <style>
.row-cb {width: 285px;margin: auto; }
.row-cb label { float: left;  }
.row-cb span { float: left; text-align: left; }
.clear-both {clear: both}
</style>

<div class="row-cb">
      <span><input name="option" id="cb1" type="checkbox" /></span>
      <label for="cb1">checkbox-001</label>      
      <div class="clear-both"></div>
</div>
<div class="row-cb">
      <span><input name="option" id="cb2" type="checkbox" /></span>
      <label for="cb2">checkbox-002</label>

      <div class="clear-both"></div>
</div>
<div class="row-cb">
      <span><input name="option" id="cb3" type="checkbox" /></span>
      <label for="cb3">checkbox-003</label>

      <div class="clear-both"></div>
</div>
<div class="row-cb">
      <span><input name="option" id="cb4" type="checkbox" /></span>
       <label for="cb4">checkbox-004</label>

      <div class="clear-both"></div>
</div>

Answer 8

一个非常现代和灵活的解决方案是使用flexbox。 E.g：

ul.categorychecklist {
    list-style:none;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
}

这就是我们2016年的表现:) 有关详细信息，请参阅：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

如何使用CSS水平对齐复选框

8 个答案: