块元素下方的三个点 [英] Three dots below block element

问题描述

我想设计如下图所示的东西，但不确定如何做！

三个点的标题

所以我只想在标题下方的中心显示3个点.但是，当我尝试使用 dotted border-bottom 时，它将使用整个< h1> 标记.

  h1 {文本对齐:居中；font-size:50px;红色;边框底部:10像素红色点缀；}  

 < h1>我的标题</h1>  

解决方案

尝试下面的代码段.使用跨度创建点并将它们居中对齐.

  h1 {文本对齐:居中；font-size:50px;底边距:10px;红色;}.three-dots {文本对齐:居中；}.three-dots span {宽度:15像素；高度:15像素；边界半径:50％；背景:红色；显示:inline-block;边距:0 5px;}  

 < h1>我的标题</h1>< div class =三个点">< span></span>< span></span>< span></span></div>  

更新:是的，当然，我接受这不是完美的解决方案.但同时确保这将是最好的解决方案之一，您可以按照以下代码段轻松地自定义具有不同颜色和大小的每个点.否则，我会同意 Manish Patel 的答案是最好的.>

  h1 {文本对齐:居中；font-size:50px;底边距:10px;红色;}.three-dots {文本对齐:居中；}.three-dots span {宽度:15像素；高度:15像素；边界半径:50％；背景:红色；显示:inline-block;边距:0 5px;}span.first {背景颜色:绿色；宽度:10px；高度:10px；}span.third {背景颜色:蓝色；宽度:20px；高度:20px；}  

 < h1>我的标题</h1>< div class =三个点">< span class ="first"></span>< span class ="second"></span>< span class ="third"></span></div>  

I wanted to design something as like below image, but not sure how to do!

Title with three dots

So I wanted to display only 3 dots on center below my title. But when I try with dotted border-bottom it takes entire <h1> tag.

h1{
  text-align: center;
  font-size: 50px;
  color: red;
  border-bottom: 10px dotted red;
}

<h1>My Title</h1>

解决方案

Try something as like below snippet. Use spans to create dots and align them center.

h1 {
  text-align: center;
  font-size: 50px;
  margin-bottom: 10px;
  color: red;
}

.three-dots {
  text-align: center;
}

.three-dots span {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: red;
  display: inline-block;
  margin: 0 5px;
}

<h1>My Title</h1>
<div class="three-dots">
  <span></span>
  <span></span>
  <span></span>
</div>

Update: Yes of course, i accept that this is not the perfect solution. But same time am sure this will be one of the best solution where you can customize each dots with different color and size in easy way as below snippet. Otherwise i would agree Manish Patel answer is the best one.

h1 {
  text-align: center;
  font-size: 50px;
  margin-bottom: 10px;
  color: red;
}

.three-dots {
  text-align: center;
}

.three-dots span {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: red;
  display: inline-block;
  margin: 0 5px;
}

span.first {
  background-color: green;
  width: 10px;
  height: 10px;
}

span.third {
  background-color: blue;
  width: 20px;
  height: 20px;
}

<h1>My Title</h1>
<div class="three-dots">
  <span class="first"></span>
  <span class="second"></span>
  <span class="third"></span>
</div>

这篇关于块元素下方的三个点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！