CODEWITHSUNDEEP
htmlcsshtml-lists
wahwahwah
wahwahwah

Reputation: 3177

Keep UL > LI content inline

I'm struggling at the moment to create a horizontal unordered list using HTML and css. Ideally, I would be able to add other elements within each line and it would maintain its horizontalness.

Here is the css/html I am currently working with:

.map-sub-container {
  background-color: red;
  border: solid 2px black;
}
.map-sub-nav {
  list-style-type: none;
}
.map-sub-nav > li {
  padding: 10px;
  display: inline;
}
<div class="map-sub-container">
  <ul class="map-sub-nav">
    <li>
      <div>
        <h1>Hello</h1>
        <p>I am a paragraph</p>
      </div>
    </li>
    <li>
      <div>
        <h1>Goodbye</h1>
        <p>I am a paragraph</p>
      </div>
    </li>
  </ul>
</div>

Am I going about this completely wrong? Is it not possible to nest additional elements in a <li> element and continue to display inline? Thank you in advance.

Upvotes: 1

Views: 2499

Answers (1)

Sandro Eric
Sandro Eric

Reputation: 342

.map-sub-container {
  background-color: red;
  border: solid 2px black;
}
.map-sub-nav {
  list-style-type: none;
}
.map-sub-nav > li {
  padding: 10px;
  display: inline;
  posistion:relative;
  float:left;
  width: 45%;
  margin: 0 auto;
}
<div class="map-sub-container">
  <ul class="map-sub-nav">
    <li>
      <div>
        <h1>Hello</h1>
        <p>I am a paragraph</p>
      </div>
    </li>
    <li>
      <div>
        <h1>Goodbye</h1>
        <p>I am a paragraph</p>
      </div>
    </li>
  </ul>
<div style="clear:both;"></div>
</div>

Upvotes: 2

Related Questions