CODEWITHSUNDEEP
htmltwitter-bootstrapcss
Poiro
Poiro

Reputation: 1011

list checkboxes displayed horizontal

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 would I go about making the items list horizontal, but also so if I have new items, they simply go onto the next line at a specific width, rather than on one line?

Upvotes: 4

Views: 22277

Answers (4)

Farhad Manafi
Farhad Manafi

Reputation: 334

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

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

Upvotes: 2

AngularJR
AngularJR

Reputation: 2762

poiro, Try this.

You can just use inline-block and use the class row so that each group of items are in their own row.
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>

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

First thing is your mark-up is totally wrong!

  1. You cannot have <ul> inside <span>.
  2. You can have only <li> inside <ul>.

To answer your query, it is just a simple CSS fix:

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

Upvotes: 8

Mathijs Rutgers
Mathijs Rutgers

Reputation: 815

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

.new-select {
    float: left;
}

Upvotes: 2

Related Questions