CODEWITHSUNDEEP
htmlcss
Denys Wessels
Denys Wessels

Reputation: 17049

Wrap <ul> menu in <hr /> tags

I have a simple menu using an unordered list.I would like to wrap it in two <hr /> elements.The problem is the second hr doesn't appear after the <ul> but instead next to the first one:

enter image description here

header ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: static;
  margin-bottom: 2px;
}
header li {
  display: inline-block;
  float: left;
  margin-right: 1px;
}
<header>
  <hr />
  <label for="show-menu" class="show-menu">Show Menu</label>
  <input type="checkbox" id="show-menu" role="button">
  <ul id="menu">
    <li><a href="#">Menu 1</a>
    </li>
    <li><a href="#">Menu 2</a>
    </li>
    <li><a href="#">Menu 3</a>
    </li>
    <li><a href="#">Menu 4</a>
    </li>
  </ul>
  <hr />
</header>

How can I fix this?

Upvotes: 1

Views: 318

Answers (3)

Hidden Hobbes
Hidden Hobbes

Reputation: 14183

You are using both display: inline-block; and float: left; on the li which is unnecessary as using float: left; will take it out of the flow mitigating the need for display: inline-block;.

Applying float: left; to the li also means that the hr will need to be cleared to ensure it displays after the ul.

As display: inline-block; will ensure the li are displayed horizontally, you can simply remove float: left; from the li without needing to clear the hr.

header ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: static;
  margin-bottom: 2px;
}
header li {
  display: inline-block;
  margin-right: 1px;
}
<header>
  <label for="show-menu" class="show-menu">Show Menu</label>
  <input type="checkbox" id="show-menu" role="button">
  <ul id="menu">
    <li><a href="#">Menu 1</a>
    </li>
    <li><a href="#">Menu 2</a>
    </li>
    <li><a href="#">Menu 3</a>
    </li>
    <li><a href="#">Menu 4</a>
    </li>
  </ul>
  <hr />
</header>

Upvotes: 2

dippas
dippas

Reputation: 60603

If you are applying inline-block to your li then you don't need to use float:left, if you use float:left you need to clear the next element that comes after, in this case <hr />

header ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: static;
  margin-bottom: 2px;
}
header li {
  display: inline-block;
  /* float:left */
  margin-right: 1px;
}
<header>
  <hr />
  <label for="show-menu" class="show-menu">Show Menu</label>
  <input type="checkbox" id="show-menu" role="button">
  <ul id="menu">
    <li><a href="#">Menu 1</a>
    </li>
    <li><a href="#">Menu 2</a>
    </li>
    <li><a href="#">Menu 3</a>
    </li>
    <li><a href="#">Menu 4</a>
    </li>
  </ul>
  <hr />
</header>

Upvotes: 1

Ivin Raj
Ivin Raj

Reputation: 3429

try this one:

   .header ul {
    list-style-type:none;
    margin:0;
    padding:0;
    position: static;
    margin-bottom:2px;
}

header li {
    display:inline-block;
    float: left;
    margin-right: 1px;
}

ul li
{
  display:inline-block;
  padding-right:10%;
  background-color:gray;
  padding:10px;
}
ul li:hover
{
  background-color:blue;
  color:white;
}

ul li
{display:inline-block;}a
{
  text-decoration:none;
}

DEMO HERE

Upvotes: 0

Related Questions