css - 将列表项文本链接放在圆圈中

Question

我想设置固定在滚动条旁边的导航链接的样式。这些链接应该在一个圆圈中，并垂直向下堆叠在滚动条上。我能够使用 li 样式获得所需的效果，但它不是 HTML5 语义。

这是 jsFiddle link

第一个导航类有效但不是正确的 HTML5 语义。当我更正它时，它不再显示! (您需要删除评论标签才能看到差异，抱歉我不知道如何一次运行多个)

如何将我的 li a 样式正确地移动到 ul 中？

对于那些更喜欢的人，这里直接是代码而不是 jsFiddle:

CSS:

/*move the step dots to the far right*/
.stepDots{
  position:fixed;
  right:0;
  top:40%;
  width:40px;
  height:150px;
  display: table;
}

/*align/style the text inside a circle*/
.stepDots li{
  vertical-align: middle;
  display: table-cell;
  margin:25px auto;
  width:30px;
  height:30px;
  text-align:center;
  background-color:rgba(0,0,0,.5);
  color:#fff;
  border-radius:100px;
  transition:all 200ms ease-in-out;
}

/*react to hover-over steps*/
.stepDots li:hover{
  background-color:rgba(255,255,255,1);
  color:#000;
}

/*remove default navigation decoration underline*/
.stepDots a{
  text-decoration: none;
}

HTML:

<!--Example of desired effect, but NOT valid-->
<nav class="stepDots">
  <a title="1" href="javascript:showStep('1');"><li>1</li></a>
  <a title="2" href="javascript:showStep('2');"><li>2</li></a>
  <a title="3" href="javascript:showStep('3');"><li>3</li></a>
  <a title="4" href="javascript:showStep('4');"><li>4</li></a>
  <a title="5" href="javascript:showStep('5');"><li>5</li></a>
  <a title="6" href="javascript:showStep('6');"><li>6</li></a>
</nav>

<!--NOT working but valid -->
<!--
<nav class="stepDots">
  <ul>
    <li><a title="1" href="javascript:showStep('1');">1</a></li>
    <li><a title="2" href="javascript:showStep('2');">2</a></li>
    <li><a title="3" href="javascript:showStep('3');">3</a></li>
    <li><a title="4" href="javascript:showStep('4');">4</a></li>
    <li><a title="5" href="javascript:showStep('5');">5</a></li>
    <li><a title="6" href="javascript:showStep('6');">6</a></li>
  </ul>
</nav>
-->

<!--this is also NOT valid and NOT working (but closer to expected) -->
<!--
<nav class="stepDots">
  <li><a title="1" href="javascript:showStep('1');">1</a></li>
  <li><a title="2" href="javascript:showStep('2');">2</a></li>
  <li><a title="3" href="javascript:showStep('3');">3</a></li>
  <li><a title="4" href="javascript:showStep('4');">4</a></li>
  <li><a title="5" href="javascript:showStep('5');">5</a></li>
  <li><a title="6" href="javascript:showStep('6');">6</a></li>
</nav> 
-->

编辑:

感谢 Gaurang Dave 在下面的回答，我做了一些更改以获得我想要的结果。

以后引用 Jsfiddle 链接 here或代码:

.stepDots{
  position:fixed;
  right:0;
  top:40%;
  display: block;
}

/*remove list item bullet points*/
.stepDots li{
  list-style-type: none;
}

/*align/style the text inside a circle*/
.stepDots li a {
  text-decoration: none;
  display: block;
  margin:5px 5px 0px 0px;
  text-align:center;
  background-color:rgba(0,0,0,.5);
  color: #fff;
  height: 30px;
  width: 30px;
  border-radius:50%;
  transition:all 200ms ease-in-out;
  line-height: 30px;
}

.stepDots li:hover a {
  background-color:rgba(255,255,255,1);
  color: #000;
  font-weight: bold;
}

<nav> <!--Style step links into navigation bubbles on the right-->
  <ul class="stepDots">
    <li><a title="1" href="javascript:showStep('1');">1</a></li>
    <li><a title="2" href="javascript:showStep('2');">2</a></li>
    <li><a title="3" href="javascript:showStep('3');">3</a></li>
    <li><a title="4" href="javascript:showStep('4');">4</a></li>
    <li><a title="5" href="javascript:showStep('5');">5</a></li>
    <li><a title="6" href="javascript:showStep('6');">6</a></li>
    </ul>
</nav> <!--end right side navigation-->

Answer 1

我试图编辑您的代码以实现结果。它会帮助你得到你想要的。您可以进一步修改它。

试试这个。

<nav>
  <ul class="stepDots">
    <li><a title="1" href="javascript:showStep('1');">1</a></li>
    <li><a title="2" href="javascript:showStep('2');">2</a></li>
    <li><a title="3" href="javascript:showStep('3');">3</a></li>
    <li><a title="4" href="javascript:showStep('4');">4</a></li>
    <li><a title="5" href="javascript:showStep('5');">5</a></li>
    <li><a title="6" href="javascript:showStep('6');">6</a></li>
  </ul>
</nav>


/*move the step dots to the far right*/
.stepDots{
  position:fixed;
  right:0;
  top:40%;
  display: table;
}

/*align/style the text inside a circle*/
.stepDots li{
  vertical-align: middle;
  display: table-cell;
  margin:25px auto;
  text-align:center;
  background-color:rgba(0,0,0,.5);
  color:#fff;
  height: 30px;
  width: 30px;
  border-radius:50%;
  transition:all 200ms ease-in-out;
}

/*react to hover-over steps*/
.stepDots li:hover{
  background-color:rgba(255,255,255,1);
  color:#000;
}

/*remove default navigation decoration underline*/
.stepDots a{
  text-decoration: none;
}

UPDATE-1

替换当前 CSS 中的以下两个类。

/*move the step dots to the far right*/
.stepDots{
  position:fixed;
  right:0;
  top:40%;
  display: block;
}

/*align/style the text inside a circle*/
.stepDots li{
  vertical-align: middle;
  display: block;
  margin:5px auto;
  text-align:center;
  background-color:rgba(0,0,0,.5);
  color:#fff;
  height: 30px;
  width: 30px;
  border-radius:50%;
  transition:all 200ms ease-in-out;
}