unerwünschte Linie mit Link zwischen divs

Question

Ich benutze HTML und CSS, um 3 Kästen als Links, gleichmäßig voneinander beabstandet zu machen. Aus irgendeinem Grund wurde, wenn ich die divs gleichmäßig verteilt hatte, eine Linie zwischen allen dreien erzeugt, die als Link zu dem div linken Teil der Linie diente.

Warum ist die Linie da?

hier ist der Code: (mit ein paar Sachen herausgenommen)

.divider{ 
 
\t text-align: center; 
 
} 
 
.image{ 
 
\t float:left; 
 
} 
 
#javatut, #frgames, #scratchtut{ 
 
\t display: inline-block; 
 
\t zoom: 2.0; 
 
\t background-color: #c0c0c0; 
 
\t text-align: center; 
 
\t padding: 10px; 
 
\t width: 20%; 
 
} 
 
#javatut { 
 
\t border: 2px solid #ff8300; 
 
} 
 
#frgames { 
 
\t border: 2px solid #0000ff; 
 
} 
 
#scratchtut { 
 
\t border: 2px solid #ff8300; 
 
} 
 
#container { 
 
    text-align: justify; 
 
} 
 
.stretch { 
 
    width: 100%; 
 
    display: inline-block; 
 
}

<div id="container"> 
 
\t <a href="url"> 
 
\t \t <div id="javatut"> 
 
\t \t \t <!-- stuff in here --> 
 
\t \t </div> 
 
\t </a> 
 
\t <a href="url"> 
 
\t \t <div id="frgames"> 
 
\t \t \t <!-- stuff in here --> 
 
\t \t </div> 
 
\t </a> 
 
\t <a href="url"> 
 
\t \t <div id="scratchtut"> 
 
\t \t \t <!-- stuff in here --> 
 
\t \t </div> 
 
\t </a> 
 
\t <span class="stretch"></span> 
 
</div>

Answer 1

Diese Linie durch den Browser Standardstil von Links unterstrichen verursacht wird. Setzen Sie einfach text-decoration: none; auf Ihre Links und die Zeile wird unsichtbar sein.

a { 
 
    text-decoration: none; 
 
} 
 
.divider { 
 
    text-align: center; 
 
} 
 
.image { 
 
    float: left; 
 
} 
 
#javatut, 
 
#frgames, 
 
#scratchtut { 
 
    display: inline-block; 
 
    zoom: 2.0; 
 
    background-color: #c0c0c0; 
 
    text-align: center; 
 
    padding: 10px; 
 
    width: 20%; 
 
} 
 
#javatut { 
 
    border: 2px solid #ff8300; 
 
} 
 
#frgames { 
 
    border: 2px solid #0000ff; 
 
} 
 
#scratchtut { 
 
    border: 2px solid #ff8300; 
 
} 
 
#container { 
 
    text-align: justify; 
 
} 
 
.stretch { 
 
    width: 100%; 
 
    display: inline-block; 
 
}

<div id="container"> 
 
    <a href="url"> 
 
    <div id="javatut"> 
 
     <!-- stuff in here --> 
 
    </div> 
 
    </a> 
 
    <a href="url"> 
 
    <div id="frgames"> 
 
     <!-- stuff in here --> 
 
    </div> 
 
    </a> 
 
    <a href="url"> 
 
    <div id="scratchtut"> 
 
     <!-- stuff in here --> 
 
    </div> 
 
    </a> 
 
    <span class="stretch"></span> 
 
</div>

Answer 2

Es ist, weil text-decoration CSS-Eigenschaft. Auf keinen Wert gesetzt, und es funktioniert.

#container a { text-decoration: none; }

Answer 3

Ihr Markup ist nicht richtig

innerhalb des div Ihr ein Tags Stellen, um alle Ihre Arten funktionieren richtig

Kontrolle dieses

.divider { 
 
    text-align: center; 
 
} 
 
.image { 
 
    float: left; 
 
} 
 
#javatut, 
 
#frgames, 
 
#scratchtut { 
 
    display: inline-block; 
 
    zoom: 2.0; 
 
    background-color: #c0c0c0; 
 
    text-align: center; 
 
    padding: 10px; 
 
    width: 20%; 
 
} 
 
#javatut { 
 
    border: 2px solid #ff8300; 
 
} 
 
#frgames { 
 
    border: 2px solid #0000ff; 
 
} 
 
#scratchtut { 
 
    border: 2px solid #ff8300; 
 
} 
 
#container { 
 
    text-align: justify; 
 
} 
 
.stretch { 
 
    width: 100%; 
 
    display: inline-block; 
 
}

<div id="container"> 
 

 
    <div id="javatut"> 
 

 
    <a href="url"> 
 
    </a> 
 
    </div> 
 

 

 
    <div id="frgames"> 
 
    <!-- stuff in here --> 
 
    <a href="url"> 
 
    </a> 
 
    </div> 
 
    <div id="scratchtut"> 
 
    <!-- stuff in here --> 
 

 
    <a href="url"></a> 
 
    </div> 
 

 
    <span class="stretch"></span> 
 
</div>

Hoffnung, das hilft Sie können auch Flexbox Sie verwenden für diese