Keep UL> LI content inline

Question

Я сейчас пытаюсь создать горизонтальный неупорядоченный список, используя HTML и css. В идеале, я мог бы добавить другие элементы в каждой строке, и он будет поддерживать горизонтальность .

Вот это CSS/HTML Сейчас я работаю с:

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

Собираюсь ли я об этом совершенно неправильно? Невозможно ли вставить дополнительные элементы в элемент <li> и продолжить отображение inline? Заранее спасибо.

Answer 1

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