CODEWITHSUNDEEP
htmlcss
mydeve
mydeve

Reputation: 563

css issue li in same line 50% of width

http://liveweave.com/BNM1Jj

I try to put both li element in same line occupying 50% of width but i could not get them in same line

i do not want to use table structure .

unable to put both li in same line why so ??

ul.primary_nav{
    background-color:#494949;
}

ul.primary_nav li.selected{
    background-color:#942F99;
    color:#494949;    float:left;
}

ul.primary_nav li{
    display:inline-block;
    padding-top:5px;padding-bottom:5px;
    width:50%;

}
ul.primary_nav li a{
    display:block;
    height:36px;
    text-align:center;
    color:#c5c5c5;
    font-size:13px;
    text-shadow:0px 1px 0px #2a2a2a;
    text-decoration:none;
    font-weight:bold;
}
ul.primary_nav li a span.icon{
    display:block;
    margin:auto;
    width:22px;
    height:22px;
}

please tell what i am missing

Upvotes: 1

Views: 4051

Answers (4)

ianaya89
ianaya89

Reputation: 4233

I think that you could have a better result using divs elements instead a ul.

Take a look a this code:

HTML

<header>
  <div>
    <a href="#">Header</a>
  </div>
  <div class="menuitem">
    <a href="#">Link 1</a>
  </div>
  <div class="menuitem">
    <a href="#">Link 2</a>
  </div>
</header>

CSS

header {
  width: 100%;
  text-align: center;
  background-color: red;
}

div.menuitem {
  width: 50%;
  float: left;
  text-align: center;
  background-color: orange;
  height: 50px;
}

It's an easy html structure, less css to write and a code more readable (and also fluid content). Check out this codepen.

Upvotes: 1

Malay Sarkar
Malay Sarkar

Reputation: 410

Option 1: (Which you might not want)

Make primary_nav rendered as a table & li as table cells

ul.primary_nav{
    background-color:#494949;
    border-radius:3px;
    width:100%;
    display:table;
}

ul.primary_nav li{
    display:table-cell;
    padding-top:5px;padding-bottom:5px;
    width:50%;
    width:50%;
    box-shadow:inset 0px 0px 1px #7d7d7d;
    -webkit-box-shadow:inset 0px 0px 1px #7d7d7d;
    border:solid 1px #921699;
    border-radius:3px;
}

Option 2:

Make li as float left with border none. Then use another inside for styling.

ul.primary_nav li{
    display:inline-block;
    padding-top:5px;padding-bottom:5px;
    width:50%;
    border:none;
    float: left;  
}

Upvotes: 1

Duncubuntu
Duncubuntu

Reputation: 130

Make the following change:

ul.primary_nav li.selected{
background-color:#942F99;
color:#494949;
float:left;
}

ul.primary_nav li{
display:inline-block;
padding-top:5px;padding-bottom:5px;
width:50%;
width:50%;
float:left;
}

Notice the float:left; that will get them on the same line.

Upvotes: 2

Weafs.py
Weafs.py

Reputation: 22992

Remove the whitespace between li elements and add box-sizing: border-box to ul.primary_nav li:

Demo

HTML:

<div class="moby_wrap">
<header>   
        <a id="logo" href="#">Header</a><br>
        <ul class="primary_nav">
            <li class="selected"><a><span class="icon about"></span>Rings & Pendants</a></li><li><a href="index2.html"><span class="icon folio"></span>Earrings and Cufflinks</a></li>
        </ul>
</header>

CSS:

ul.primary_nav li{
    display:inline-block;
    padding-top:5px;
    padding-bottom:5px;
    width: 50%;
    box-sizing: border-box;
    box-shadow:inset 0 0 1px #7d7d7d;
    -webkit-box-shadow:inset 0 0 1px #7d7d7d;
    border:solid 1px #921699;
    border-radius:3px;
}

Upvotes: 1

Related Questions