Question

我有11个 DOTS 使用CSS水平排列。我的问题是，如何从浏览器的宽度大小均匀/均匀地分配元素之间的间距（我使用 SPAN ）？我可以在CSS中做一些数学运算吗？这是我到目前为止的示例代码：

HTML

<span id="first" class="border-change circle"></span>
<span id="second" class="circle"></span>
<span id="third" class="circle"></span>
<span id="fourth" class="circle"></span>
<span id="five" class="circle"></span>
<span id="six" class="circle"></span>
<span id="seven" class="circle"></span>
<span id="eight" class="circle"></span>
<span id="nine" class="circle"></span>
<span id="ten" class="circle"></span>
<span id="eleven" class="circle"></span>

CSS

span.circle {
  height: 20px;
  width: 20px;
  border-radius: 100%;
  border: 1px solid #eee;
  background:#ddd;
  position: absolute;
  left:0;
  top: 45px;
  cursor: pointer;
  transition: all 0.4s ease-in-out;
}

#second{
  left: 190px;
}
#third{
  left: 380px;
}
#fourth{
  left: 570px;
}

#five{
  left: 760px;
}
#six{
  left: 950px;
}
#seven{
  left: 1140px;
}

#eight{
  left: 1330px;
}
#nine{
  left: 1520px;
}
#ten{
  left: 1710px;
}

#eleven{
  left: 1900px;
}

Answer 1

使用flexbox，您可以执行以下操作：

DEMO

.parent {
    display: flex;
    justify-content: space-between;
}

span.circle {
  height: 20px;
  width: 20px;
  border-radius: 100%;
  border: 1px solid #eee;
  background:#ddd;   
  cursor: pointer;
  transition: all 0.4s ease-in-out;
}

Answer 2

为什么不使用百分比？

JsFiddle：http://jsfiddle.net/w2qfww31/

#second{
  left: 10%;
}

#third{
  left: 20%;
}

...

要回答您的其他问题，您可以使用计算在CSS中使用计算： https://developer.mozilla.org/en-US/docs/Web/CSS/calc

编辑：正如Paulie_D所做的那样，你的解决方案将是这样的：

span.circle {
   height: 20px;
   width: 20px;
   border-radius: 100%;
   border: 1px solid #eee;
   background:#ddd;
   float:left;
   cursor: pointer;
   transition: all 0.4s ease-in-out;
   margin-top: 10px;
   margin-left:calc((100% - (11*20px)) / 12);
}

Answer 3

如果您在更改布局时遇到问题，请按以下方式使用。

<强> HTML

  <div class="test">
    <div><span id="first" class="border-change circle"></span></div>
    <div><span id="second" class="circle"></span></div>
    <div><span id="third" class="circle"></span></div>
    <div><span id="fourth" class="circle"></span></div>
    <div><span id="five" class="circle"></span></div>
    <div><span id="six" class="circle"></span></div>
    <div><span id="seven" class="circle"></span></div>
    <div><span id="eight" class="circle"></span></div>
    <div><span id="nine" class="circle"></span></div>
    <div><span id="ten" class="circle"></span></div>
 <div>

<强> CSS

  span.circle {
   height: 20px;
   width: 20px;
   border-radius: 100%;
   border: 1px solid #eee;
   background:#ddd;
   cursor: pointer;
   display:inline-block;
   transition: all 0.4s ease-in-out;
  }
 .test div{display:table-cell; width:auto; text-align:center;}
 .test{display:table; width:100%;}

FIDDLE DEMO

Answer 4

将所有跨度放在div中：

<强> HTML

<div class='flexdiv'>
<span>....
</div>

<强> CSS

.flexdiv{
    Display: flex;
}

Answer 5

使用Justify同等间隔HTML元素 - 适用于旧版浏览器

这是一个简单的浏览器兼容解决方案，从thirtydot's great answer转到类似的问题： Fluid width with equally spaced DIVs

这个方便的解决方案在容器上使用text-align：justify，并在圆圈div上显示：inline-block。内联块元素不仅响应文本对齐对齐，它们也可以具有宽度和高度。

这很好，因为当浏览器窗口缩小时，圆圈div将在它们换行到下一行时证明是正确的。如果您不希望将圆形div包裹到下一行，只需在容器上设置最小宽度即可。

请记住，要使用此功能，每个div都需要自己的行，如下面的代码，或者标签之间需要有空格。如果你像（<div>1</div><div>2</div>）一样运行你的div，它将无法工作。
默认情况下，内联块会添加一小段边距。您可以添加一些负边距来移除空间。
需要拉伸范围。
前面带*的css适用于IE7及以下，_适用于IE6。这些是安全修复，但如果您的样式表符合要求，则将它们添加到旧的IE样式表中。注意：您可以创建一个样式表，只有旧版本的IE可以通过将链接包装在IE条件注释中来查看，例如 - ，并将此链接放在常规样式表之后。

JSFiddle

<div class="container">
    <div id="first" class="circle"></div>
    <div id="second" class="circle"></div>
    <div id="third" class="circle"></div>
    <div id="fourth" class="circle"></div>
    <div id="five" class="circle"></div>
    <div id="six" class="circle"></div>
    <div id="seven" class="circle"></div>
    <div id="eight" class="circle"></div>
    <div id="nine" class="circle"></div>
    <div id="ten" class="circle"></div>
    <span class="stretch"></span>
 <div>

CSS

 .container {
    text-align:justify;
    -ms-text-justify:distribute-all-lines;
    text-justify:distribute-all-lines;
   /* min-width:260px;
      _width:260px;  add min-width if you want the circle divs to stay on one line with a scrollbar */
    padding: 45px 0px 0px 0px;
}

div.circle {
   height:20px;
   width:20px;
   vertical-align:top;
   display:inline-block;
   *display:inline;
   *zoom:1;
   border-radius:100%;
   border:1px solid #eee;
   background:#ddd;
   cursor:pointer;
   transition:all 0.4s ease-in-out;
  }

.stretch {
    width:100%;
    display:inline-block;
    font-size:0;
    line-height:0;
}

Answer 6

轻微作弊......使用JS

See my JSfiddle

var childArray = document.getElementById('bullets').children;

left = 190;
for (var i = 0; i < childArray.length; i++)
{
    var cur_left = (i*left).toString();
    childArray[i].style.left = cur_left+"px";
}

使用CSS分布元素水平相等

6 个答案:

使用Justify同等间隔HTML元素 - 适用于旧版浏览器