Как отобразить элементы горизонтально?

Question

[DevilPrado]

Есть подменю выбора цветов, которое должно идти в горизонтальном порядке элементов.
Inline-block, inline не работают, подскажите почему?


Стили для контейнеров:

.pod_menu{
        margin:0;
        padding:5px 5px 5px 5px;
        background:#fff;
        border:3px solid #b6e0f6;
        display:inline-block;
        position:absolute;
        
        z-index:2;
        
        border-radius: 10px;
       
    }
  .sub{
      width:160px;
      display: inline-block;
  }
    .colors{
        border:3px solid #b6e0f6;
        width: 26px;
        line-height:24px;
        text-align:center;
        border-radius:50%;
        background:red;
    }
    a{
        text-decoration: none;
    }
.color_el{
   text-align:center;
   position:absolute; 
   border:3px solid #b6e0f6;
   z-index:1;
   background:#1a92fb;
   color:#1a92fb;
   width: 26px;
   line-height:24px;
   border-radius:50%;
   top: 148px;
   left: 139px;
   font-size:11px;
}
.hell{
    Background: white;
    width:96%;
    position:relative;
    left:2%;
    border-radius: 10px;
    padding-top:10px;
    padding-bottom:10px; 
}
 #footer{
        padding-top:1%;
        Background: #397dbf;
        height:220px;
        border-radius: 0 0 15px 15px;

древо

<div id="footer">
           <div class="hell">
                   <div class="sub">
                        <div class="shetpont line" id="shetpon">
                         0
                        </div>
                        <div onclick="model1onClick()" class="object line">
                            <span class="t-obj">
                                Понтон <br> модульный
                            </span>
                            <input type="image" alt=" Модуль понтона"  src="img/pontoon.png" width="100px" height="100px">
                        </div>
                        <div class="color_el line"  id="shetpon">
                            0 
                            <div class="pod_menu">
                                <div class="colors line" style="background: #1a92fb; " onclick="" ><a href="#" style="color:#1a92fb; ">0</a></div>
                                <div class="colors line" style="background: #c00; " onclick=""><a href="#" style="color:#c00;">0</a></div>
                                <div class="colors line" style="background: #393; " onclick=""><a href="#" style="color:#393; ">0</a></div>
                                <div class="colors line" style="background: #ffffff; " onclick=""><a href="#" style="color:#ffffff;">0</a></div>
                                <div class="colors line" style="background: #666; " onclick=""><a href="#" style="color:#666;">0</a></div>
                            </div>
                        </div>
                   </div>

Comments

[ThunderCat]

display:inline-block;
position:absolute;

Или одно или другое, вместе эти 2 свойства полный бред. В вашем случае проще флексбоксом расположить.

[Ankhena]

Сделайте песочницу на jsfiddle.net или codepen.io с ответом мне (чтобы уведомлялка пришла)

[DevilPrado]

Ankhena, https://jsfiddle.net/u0yL2sgx/2/

[Ankhena]

DevilPrado, https://jsfiddle.net/tnhu3m0w/
только расположите, где вам нужно

[DevilPrado]

Ankhena, Спасибо большое

[Ankhena]

DevilPrado, на здоровье.
Изучайте флексы и гриды, очень полезные штуки.

Answer 1

[Марат Долотов]

.pod_menu .colors{display: inline-block}

Comments

[DevilPrado]

Не решает проблему

[Марат Долотов]

оставьте класс .pod_menu блоком уберите inline-block, он же у вас абсолютный плавающий

.pod_menu{
margin:0;
padding:5px 5px 5px 5px;
background:#fff;
border:3px solid #b6e0f6;
position:absolute;
z-index:2;
border-radius: 10px;
}

[DevilPrado]

Я перепробовал уже все эти варианты, мне кажется, может проблема кроется в том, что с шириной блока что-то происходит, почему он не может по горизонтали растянуться

[Марат Долотов]

DevilPrado, попробуйте передать для .colors display: table-cell

[DevilPrado]

Марат Долотов, Никаких изменений