.colBlock {
display: inline-block;
/* Надо расположить в одну строку */
}
.red {
width: 50px;
height: 50px;
background: red;
}
.blue {
width: 50px;
height: 50px;
background: blue;
}
.brown {
width: 50px;
height: 50px;
background: brown;
}
.orange {
width: 50px;
height: 50px;
background: orange;
}
.black {
width: 50px;
height: 50px;
background: black;
}
.grey {
width: 50px;
height: 50px;
background: grey;
}
.yellow {
width: 50px;
height: 50px;
background: yellow;
}
.white {
width: 50px;
height: 50px;
background: white;
}
.green {
width: 50px;
height: 50px;
background: green;
}
<dialog id="bgColor">
<div class="colBlock">
<div class="red">red</div>
<div class="blue"></div>
<div class="brown"></div><br>
<div class="orange"></div>
<div class="black"></div>
<div class="grey"></div><br>
<div class="yellow"></div>
<div class="white"></div>
<div class="green"></div><br>
</div>
<hr />
<button class="closeButton" id="bgColClose" onclick="closeCondWind()">Закрыть</button>
</dialog>
Надо расположить эти блоки в одну строку , пробовал не выходит
display:flex;
display
родительского элемета, потому что у<dialog>
по умолчаниеdisplay:none
и если его поменять , то у меня будет этот блок будет показываться на странице без нажатия на кнопку