Question

抱歉标题。我根本不知道如何描述我的问题。但是，我们走吧！

这就是我的问题：IMG

我希望它在每种颜色之间有空格，如下所示： IMG2

现在，我该怎么做？

 <p><div class="circle" style="background-color:black;"></div>BLACK: 4 - 6 <i class="fa fa-key" aria-hidden="true"></i>
                            <!-- Chakram - WHITE -->
                              <p><div class="circle" style="background-color:white;"></div>WHITE:  4 - 6 <i class="fa fa-key" aria-hidden="true"></i>
                               <p><div class="circle" style="background-color:grey;"></div>GREY: 1 - 2 <i class="fa fa-key" aria-hidden="true"></i>
                            <p><div class="circle" style="background-color:crimson;"></div>CRIMSON: No color.
                               <p><div class="circle" style="background-color:pink;"></div>PINK: 3 - 4 <i class="fa fa-key" aria-hidden="true"></i>
                            <p><div class="circle" style="background-color:#0047AB;"></div>COBALT: 3 -4 <i class="fa fa-key" aria-hidden="true"></i>
                            <p><div class="circle" style="background-color:skyblue;"></div>SKYBLUE: 3 - 4 <i class="fa fa-key" aria-hidden="true"></i>
                            <p><div class="circle" style="background-color:#e97451;"></div>BURNT SIENNA: 1 - 3 <i class="fa fa-key" aria-hidden="true"></i>
                            <p><div class="circle" style="background-color:F4C430;;"></div>SAFFRON: 3 - 4 <i class="fa fa-key" aria-hidden="true"></i>
                            <p><div class="circle" style="background-color:#32CD32;"></div>LIME: 3 - 4 <i class="fa fa-key" aria-hidden="true"></i>
                            <p><div class="circle" style="background-color:#228b22;"></div>FOREST GREEN: 3 - 4 <i class="fa fa-key" aria-hidden="true"></i>
                            <p><div class="circle" style="background-color:#ffa500;"></div>ORANGE:  3 - 4 <i class="fa fa-key" aria-hidden="true"></i>
                            <p><div class="circle" style="background-color:#551a8b;"></div>PURPLE: 3 - 4 <i class="fa fa-key" aria-hidden="true"></i>
                            </div><p>

CSS

.circle {
    width: 20px;
    height: 20px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    float:left;
    margin-right: 3px;
    border: 1px solid black;
}

Answer 1

试试这个。将每个col放在不同的容器中，并为每列提供宽度。

＆＃13;

.circle {
  width: 20px;
  height: 20px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  float: left;
  margin-right: 3px;
  border: 1px solid black;
}
.parent{
  display: table;
  
}
.col{
  display: table-cell;
  width: 200px;
  
}
.col1{
  border-right: 1px solid black;
}
.col2 span{
  float: right;
}

＆＃13;

<div class="parent">
  <div class="col col1">
    <span class="circle" style="background-color:white;"> 
  </span>
    <span>
      WHITE:
  </span>
  </div>
  <div class="col col2">
    <span> 4 - 6 <i class="fa fa-key" aria-hidden="true"></i></span>
  </div>
  
</div>

<div class="parent">
  <div class="col col1">
    <span class="circle" style="background-color:green;"> 
  </span>
    <span>
      GREEN:
  </span>
  </div>
  <div class="col col2">
    <span> 4 - 6 <i class="fa fa-key" aria-hidden="true"></i></span>
  </div>
  
</div>

<div class="parent">
  <div class="col col1">
    <span class="circle" style="background-color:red;"> 
  </span>
    <span>
      RED:
  </span>
  </div>
  <div class="col col2">
    <span> 4 - 6 <i class="fa fa-key" aria-hidden="true"></i></span>
  </div>
  
</div>

＆＃13;

Answer 2

您可以尝试插入表格而不是p。这是一个示例：

<html>
    <head>
        <style>
        .circle {
            width: 20px;
            height: 20px;
            -webkit-border-radius: 25px;
            -moz-border-radius: 25px;
            border-radius: 25px;
            float:left;
            margin-right: 3px;
            border: 1px solid black;
        }
        </style>
    </head>
    <body>
        <table border="0">
            <tr>
                <td style="width:20px"><div class="circle" style="background-color:black;"></div></td>
                <td style="width:150px">BLACK:</td> 
                <td style="width:100px">4 - 6 <i class="fa fa-key" aria-hidden="true"></i></td>
            </tr>
            <tr>
                <td style="width:20px"><div class="circle" style="background-color:white;"></div></td>
                <td style="width:150px">WHITE:</td> 
                <td style="width:100px">4 - 6 <i class="fa fa-key" aria-hidden="true"></i></td>
            </tr>
            <tr>
                <td style="width:20px"><div class="circle" style="background-color:grey;"></div></td>
                <td style="width:150px">GREY:</td> 
                <td style="width:100px">1 - 2 <i class="fa fa-key" aria-hidden="true"></i></td>
            </tr>
        </table>
    </body>
</html>

Answer 3

    <p><div class="circle" style="background-color:black;"></div><Span class="title">BLACK:</Span><Span Class="description"> 4 - 6 </Span><i class="fa fa-key" aria-hidden="true"></i></p>
<p><div class="circle" style="background-color:white;"></div><Span class="title">WHITE:</Span><Span Class="description">  4 - 6 </Span><i class="fa fa-key" aria-hidden="true"></i></p>
<p><div class="circle" style="background-color:grey;"></div><Span class="title">GREY:</Span><Span Class="description"> 1 - 2 </Span><i class="fa fa-key" aria-hidden="true"></i></p>
<p><div class="circle" style="background-color:crimson;"></div><Span class="title">CRIMSON:</Span><Span Class="description"> No color.</Span></p>
<p><div class="circle" style="background-color:pink;"></div><Span class="title">PINK:</Span><Span Class="description"> 3 - 4 </Span><i class="fa fa-key" aria-hidden="true"></i></p>
<p><div class="circle" style="background-color:#0047AB;"></div><Span class="title">COBALT:</Span><Span Class="description"> 3 -4 </Span><i class="fa fa-key" aria-hidden="true"></i></p>
<p><div class="circle" style="background-color:skyblue;"></div><Span class="title">SKYBLUE:</Span><Span Class="description"> 3 - 4 </Span><i class="fa fa-key" aria-hidden="true"></i></p>
<p><div class="circle" style="background-color:#e97451;"></div><Span class="title">BURNT SIENNA:</Span><Span Class="description"> 1 - 3 </Span><i class="fa fa-key" aria-hidden="true"></i></p>
<p><div class="circle" style="background-color:F4C430;;"></div><Span class="title">SAFFRON:</Span><Span Class="description"> 3 - 4 </Span><i class="fa fa-key" aria-hidden="true"></i></p>
<p><div class="circle" style="background-color:#32CD32;"></div><Span class="title">LIME:</Span><Span Class="description"> 3 - 4 </Span><i class="fa fa-key" aria-hidden="true"></i></p>
<p><div class="circle" style="background-color:#228b22;"></div><Span class="title">FOREST GREEN:</Span><Span Class="description"> 3 - 4 </Span><i class="fa fa-key" aria-hidden="true"></i></p>
<p><div class="circle" style="background-color:#ffa500;"></div><Span class="title">ORANGE:</Span><Span Class="description">  3 - 4 </Span><i class="fa fa-key" aria-hidden="true"></i></p>
<p><div class="circle" style="background-color:#551a8b;"></div><Span class="title">PURPLE:</Span><Span Class="description"> 3 - 4 </Span><i class="fa fa-key" aria-hidden="true"></i></p>


<style>
.title{
  margin-right:50px;
border-right:1px,solid,black;
}
.description{
margin-left:50px;
}
</style>

我怎么做行？

3 个答案: