时间戳

首页 > 解决方案 > CSS 或 HTML：将两个圆形 div 放在另一个 div 旁边

html - CSS 或 HTML：将两个圆形 div 放在另一个 div 旁边

问题描述

我有 2 个圆形 div，我想做的就是把它们放在旁边。我已经查看了我的类似问题，但它们没有提供足够的信息。

这是我想做的事情：

在这里检查
如何将两个圆圈放在图像中说明的另一个 div 旁边？

我试过了

style="float:right"

但它最终在最右边，这不是我想要的。

欢迎任何想法。

标签： htmlcss

解决方案

您可以使用将display:inline元素显示为内联元素的 CSS 属性。

HTML

<select id="dropdown" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<div id="circles">
  // HTML code for circles here.
</div>

CSS

#dropdown, #circles{    
    display: inline;
}


.dot {
  height: 25px;
  width: 25px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}

#dropdown, #circles{    
    display: inline-block;
    vertical-align: middle;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dot {
  height: 25px;
  width: 25px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}
#dropdown, #circles{    
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<select id="dropdown" name="cars" id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<div id="circles" style="text-align:center">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>
</body>
</html>

推荐阅读