Aufzählungspunkte zwischen div

Question

Ich habe den folgenden Code 4 Tasten angezeigt werden:

#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>

Die schließlich führen auf: http://www.be-virtual.org/schnittchen

Jetzt i Aufzählungszeichen wollen zwischen dieser divs wie :

Es ist sehr wichtig, dass die res ult reagiert und die Aufzählungspunkte sind auf einem Mobiltelefon nicht sichtbar. Hat jemand eine Idee, das zu realisieren?

Answer 1

Hinzufügen "& bull; & bull; & bull;" jede Taste wie diese, außer dem ersten,: eingerichtet ist

<div class="large-3 small-12 columns"> 
<span id="bullets1"></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="bullets2">&bull;&bull;&bull;</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="bullets3">&bull;&bull;&bull;</span> 
<a href="#was_ist" id="was_ist_anchor"> 
<img src="images/icons/question_icon.png"> 
<p>Was ist Schnittchen</p> 
</a> 
</div> 

Je nachdem, wie Sie die Responsive Layout JavaScript, müssen Sie bedingt auf das Display des span-Elements auf „inline“ oder „none“ basierend auf, wenn die Site in einem mobilen Browser oder nicht geladen wird:

if(ismobile){ 
document.getElementById("buttons1").style.display = "none"; 
document.getElementById("buttons2").style.display = "none"; 
document.getElementById("buttons3").style.display = "none"; 
} 
else{ 
document.getElementById("buttons1").style.display = "inline"; 
document.getElementById("buttons2").style.display = "inline"; 
document.getElementById("buttons3").style.display = "inline"; 
} 

Answer 2

könnten Sie flex und mediaquerie verwenden. Beispiel

#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>

Run-Schnipsel in voller Seitenmodus und die Größe Fensterverhalten