Question

我有以下标记： -

<div class="fil hori now">
  <span class="label-new">
    <ul class="ngc">
      <li>
        <input class="any" id="any" name="any" type="checkbox"> 
        <label id="any" for="any">Any</label>
      </li>

      <li class="new-select">
        <input id="item1" name="item1" type="checkbox">
        <label id="item1" for="item1">item1</label>
      </li>

      <li class="new-select">
        <input id="item2" name="item2" type="checkbox">
        <label id="item2" for="item2">item2</label>
      </li>

      <li class="new-select">
        <input id="item3" name="item3" type="checkbox">
        <label id="item3" for="item3">item3</label>
      </li>
    </ul>

  </span>
</div>

我如何才能使项目列表水平，但如果我有新项目，他们只是以特定宽度而不是一行进入下一行？

Answer 1

首先，你的加价是完全错误的！

<ul>内无法<span>。
~~<li>内只能有<ul>。~~

要回答您的问题，这只是一个简单的CSS修复：

.new-select {
  display: inline-block;
}

Answer 2

add to class
.new-select{
float: right;
}

or
.new-select{
    display: inline-block;
    }

Answer 3

new-select上的一个简单的float：left属性应该可以解决问题。

.new-select {
    float: left;
}

Answer 4

poiro ，试试吧。

您可以使用inline-block并使用课程row，以便每组项目都在自己的行中。
希望这可以帮助。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<style>
body {
  padding-top: 50px;
}
.block {
  height: 400px;
}  
.list ul li  {
  display: inline-block;
  margin-left: 0px;
  margin-right:8%;
  margin-top: 10px;
  margin-bottom:10px;  
}
.borders {
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border: 1px solid #000000;
    background-color: rgba(1355,255,000,0.4);/* adjust the div transparency here*/
}    
</style>

</head>

<body>

    <nav class="navbar navbar-inverse navbar-fixed-top ">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand " href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container col-lg-12"><br><br></div>


<div class="container col-xs-12 col-sm-10 col-sm-offset-1 col-md-10 col-md-offset-1 col-lg-10 col-lg-offset-1 bg-primary ">
    <div class="row list">
     <!--<span class="label-new">-->
            <ul class="ngc">
                <li class="col-xs-2 borders">
                    <input class="any" id="any" name="any" type="checkbox"> 
                    <label id="any" for="any">Any</label>
                </li>
                <li class="col-xs-2 borders new-select">
                    <input id="item1" name="item1" type="checkbox">
                    <label id="item1" for="item1">item1</label>
                </li>
                <li class="col-xs-2 borders new-select">
                    <input id="item2" name="item2" type="checkbox">
                    <label id="item2" for="item2">item2</label>
                </li>
                <li class="col-xs-2 borders new-select">
                    <input id="item3" name="item3" type="checkbox">
                    <label id="item3" for="item3">item3</label>
                </li>
            </ul>
     <!--</span>-->
    </div>
    
    <div class="row">
            <span class="list label-new">
                <ul class="ngc">
                    <li class="col-xs-2 borders">
                        <input class="any" id="any" name="any" type="checkbox"> 
                        <label id="any" for="any">new ones</label>
                    </li>
                    <li class="col-xs-2 borders new-select">
                        <input id="item1" name="item1" type="checkbox">
                        <label id="item1" for="item1">item1</label>
                    </li>
                    <li class="col-xs-2 borders new-select">
                        <input id="item2" name="item2" type="checkbox">
                        <label id="item2" for="item2">item2</label>
                    </li>
                    <li class="col-xs-2 borders new-select">
                        <input id="item3" name="item3" type="checkbox">
                        <label id="item3" for="item3">item3</label>
                    </li>
                </ul>

            </span>
        </div>
</div>

   


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    
</body>
</html>

列表复选框水平显示

4 个答案: