如何使用CSS水平平均分配元素

问题描述 投票：1回答：6

我有11个点使用CSS水平排列。如何根据浏览器窗口的宽度均匀/平均地分配元素之间的间距（例如<span>元素）？

到目前为止是我的示例代码：

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;
}
<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>
html css html5 css3
6个回答
6
投票

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

.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;
}
<div class="parent">
    <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>
</div>

JSFiddle Demo

4
投票

为什么不使用百分比？

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

#second{
  left: 10%;
}

#third{
  left: 20%;
}

...

要回答您的其他问题，您可以使用calc在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);
}
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

1
投票

使用Justify等距排列HTML元素-在较旧的浏览器上可用

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

此便捷的解决方案在容器上使用text-align：justify，在圆div上显示：inline-block。内联块元素不仅可以响应文本对齐方式，而且还可以具有宽度和高度。

很好，因为随着浏览器窗口的缩小，圆div在换行到下一行时会对齐。如果您不希望圆div换行到下一行，只需在容器上设置最小宽度。

  1. 请记住，每个div都需要自己的一行，如下面的代码，或者标记之间必须有一个空格。如果像（<div>1</div><div>2</div>）一样一起运行div，它将无法正常工作。

  2. 默认情况下，内联块会添加少量边距。您可以添加一些负边距来删除空格。

  3. 它需要伸展范围。

  4. 带有*的css用于IE7及以下版本，_表示IE6。这些是安全修复程序，但是如果您的样式表兼容，则将其添加到较早的IE样式表中。注意：通过将链接包装在IE条件注释中（例如-<!--[if lte IE 7]><link href="media/stylesheet/internet-explorer.css" rel="stylesheet" type="text/css"><![endif]-->），可以创建只有旧版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;
}
0
投票

将所有跨度放在div中，并指定为display: flex：

.flexdiv{
    display: flex;
}
<div class='flexdiv'>
    <span>span</span>
    <span>span</span>
    <span>span</span>
    <span>span</span>
    <span>span</span>
    <span>span</span>
</div>
-3
投票

轻微作弊...使用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";
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.