List displayed horizontally

Question

List displayed horizontally

I have the following markup: -

<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>

How can I make the list of items horizontal, but also if I have new items, they just go to the next line with a specific width, not on the same line?

+3

html css html5 css3 twitter-bootstrap

Poiro June 16 At 11:09 am

source to share

4 answers

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

Run code Hide result

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

Run code Hide result

+2

Farhad manafi June 16 15 at 11:17

source to share

A simple float: left property in new-select should do the trick.

.new-select {
    float: left;
}

+2

Mathijs Rutgers June 16 15 at 11:17

source to share

poiro . Try it.

You can just use inline-block

and use a class row

to have each group of elements on their own line.
Hope this helps.

<!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>

Run code Hide result

0

AngularJR June 16 15 at 11:57

source to share

Praveen kumar · Accepted Answer · 2015-06-16T11:16:59+0000

First, your allowance is completely wrong!

You can't have it <ul>

inside <span>

.
You can only have it <li>

inside <ul>

.

To answer your request, this is just a simple CSS fix:

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

List displayed horizontally

More articles: