javascript - div 之间的元素符号点

Question

我有以下代码来显示 4 个按钮:

#buttons {
  text-align: center;
  padding-top: 4%;
}

#buttons img {
  display: inline-block;
  list-style: none;
  padding: 10px;
}

#buttons p {
  color: #fff;
  font-family: ;
  font-weight: 600;
  font-size:19px;
}

#buttons li {
  display: inline-block;
}

<div class="row" id="buttons">
    
    <div class="large-3 small-12 columns">
<span id="bullets"></span>
      <a href="#was_ist" id="was_ist_anchor"><img src="images/icons/question_icon.png"><p>Was ist Schnittchen</p></a>
    </div>

    <div class="large-3 small-12 columns">
<span id="bullets">&bull;</span>
      <a href="#wo" id="wo_anchor"><img src="images/icons/location_icon.png"><p>Wo finden Sie Schnittchen</p></a>
    </div>

    <div class="large-3 small-12 columns">
<span id="bullets">&bull;</span>
      <a href="#philosophie" id="#philosophie"><img src="images/icons/sandwich_icon.png"><p>Schnittchen Philosophie</p></a>
    </div>

    <div class="large-3 small-12 columns">
<span id="bullets">&bull;</span>
      <a href="#was_erwartet" id="#was_erwartet"><img src="images/icons/kiss_icon.png"><p>Was erwartet Sie</p></a>
    </div>

    </div>

最后的结果是:http://www.be-virtual.org/schnittchen

现在我想要这个 div 之间的要点，例如:

结果是响应式的并且要点在手机上不可见非常重要。有没有人知道如何实现这一点？

Answer 1

您可以使用 flex 和 mediaquerie。例子

#buttons {
  display:flex;
  text-align:center;
  flex-wrap:wrap;
}
#buttons:before,
#buttons:after {/* you may use also justify-content ... */
  content:'';
  flex:1;/* will use as much space as possible pushing content into middle */
}
.dots {/* style these as you wish, made simple for demo */
  border-top:dotted 6px #AD1616;
  width:1.5em;
  height:3em;/* to set at middle's height of icon*/
  margin:auto 2em;/* vertical centering and keep some room around */
}
@media ( max-width : 950px ) {/* set here your breaking point demo is at 950px */
  .dots {
    display:none;/* hide dots */
  }
  #buttons {
  display:block;/* back to regular display  to pile icone/links */
  }
}

<div id="button_bg" class="hide-for-small">
  <div class="row" id="buttons">
    
    <div class="large-3 small-12 columns">
      <a href="#was_ist" id="was_ist_anchor"><img src="http://www.be-virtual.org/schnittchen/images/icons/question_icon.png"><p>Was ist Schnittchen</p></a>
    </div>
    <div class="dots"></div>
    <div class="large-3 small-12 columns">
      <a href="#wo" id="wo_anchor"><img src="http://www.be-virtual.org/schnittchen/images/icons/location_icon.png"><p>Wo finden Sie Schnittchen</p></a>
    </div>

    <div class="dots"></div>
    <div class="large-3 small-12 columns">
      <a href="#philosophie" id="#philosophie"><img src="http://www.be-virtual.org/schnittchen/images/icons/sandwich_icon.png"><p>Schnittchen Philosophie</p></a>
    </div>

    <div class="dots"></div>
    <div class="large-3 small-12 columns">
      <a href="#was_erwartet" id="#was_erwartet"><img src="http://www.be-virtual.org/schnittchen/images/icons/kiss_icon.png"><p>Was erwartet Sie</p></a>
    </div>

    </div>
  </div>

以全页模式运行代码片段并调整窗口大小以查看行为