ein href nicht funktioniert und nicht in der Größe ändern

Question

Mein a href innerhalb eines div funktioniert nicht Ich sah, dass die Breite und Höhe 0px war, also habe ich versucht, die Größe zu erhöhen, aber es wird nicht erhöht. Jeder Punkt soll Sie auf eine andere Seite in der OnePage scroller

Ich mache

.dotstyle-scaleup{ 
 
\t float: right; 
 
\t margin-right: 3%; 
 
} 
 

 
.dotstyle-scaleup li{ 
 
\t background-color: #eeeeee; 
 
\t width: 15px; 
 
\t height: 15px; 
 
\t border-radius: 50%; 
 
\t margin: 80px 0 0 0; 
 
\t list-style: none; 
 
} 
 

 
.dotstyle-scaleup #current1{ 
 
\t background-color: #54a59f; 
 
\t width: 20px; 
 
\t height: 20px; 
 
\t border-radius: 50%; 
 
\t margin: 80px 0 0 0; 
 
\t list-style: none; 
 
}

<div id="wrapper"> 
 
     <!-- Landings --> 
 
     <div class="section" data-anchor="page1" style="background-color: red"> 
 
      <div class="dotstyle-scaleup"> 
 
      <ul> 
 
       <li id="current1"><a href="#page1"></a></li> 
 
       <li><a href="#page2"></a></li> 
 
       <li><a href="#page3"></a></li> 
 
       <li><a href="#page4"></a></li> 
 
       <li><a href="#page5"></a></li> 
 
      </ul> 
 
      </div> 
 
     </div>

Answer 1

Da die Elemente in Frage, height und width Eigenschaften werden nicht erklärt, keine Inhalte versenden genug.

Betrachten wir ein display Eigenschaft erklärt, zusätzlich eine height und width Eigenschaft für die verschachtelten Ankerelemente zu spezifizieren (a) zB:

.dotstyle-scaleup li a { 
    width: 100%; 
    height: 100%; 
    display: block; 
} 

Code Snippet Demonstration:

.dotstyle-scaleup { 
 
    float: right; 
 
    margin-right: 3%; 
 
} 
 

 
.dotstyle-scaleup li { 
 
    background-color: #eeeeee; 
 
    width: 15px; 
 
    height: 15px; 
 
    border-radius: 50%; 
 
    margin: 80px 0 0 0; 
 
    list-style: none; 
 
} 
 

 
.dotstyle-scaleup #current1 { 
 
    background-color: #54a59f; 
 
    width: 20px; 
 
    height: 20px; 
 
    border-radius: 50%; 
 
    margin: 80px 0 0 0; 
 
    list-style: none; 
 
} 
 

 

 
/* Additional */ 
 

 
.dotstyle-scaleup li a { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: block; 
 
}

<div id="wrapper"> 
 
    <!-- Landings --> 
 
    <div class="section" data-anchor="page1" style="background-color: red"> 
 
    <div class="dotstyle-scaleup"> 
 
     <ul> 
 
     <li id="current1"> 
 
      <a href="#page1"></a> 
 
     </li> 
 
     <li> 
 
      <a href="#page2"></a> 
 
     </li> 
 
     <li> 
 
      <a href="#page3"></a> 
 
     </li> 
 
     <li> 
 
      <a href="#page4"></a> 
 
     </li> 
 
     <li> 
 
      <a href="#page5"></a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div>