Question

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

这是jsFiddle link

第一个nav类正在运行，但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

我尝试编辑代码以实现结果。它将帮助您获得您想要的东西。您可以进一步修改它。

试试这个。

$ python manage.py test
Creating test database for alias 'default'...
..........
----------------------------------------------------------------------
Ran 10 tests in 0.413s

OK
Destroying test database for alias 'default'...

Ten slowest tests:
0.3597s test_detail_view_with_a_future_poll (polls.tests.PollIndexDetailTests)
0.0284s test_detail_view_with_a_past_poll (polls.tests.PollIndexDetailTests)
0.0068s test_index_view_with_a_future_poll (polls.tests.PollViewTests)
0.0047s test_index_view_with_a_past_poll (polls.tests.PollViewTests)
0.0045s test_index_view_with_two_past_polls (polls.tests.PollViewTests)
0.0041s test_index_view_with_future_poll_and_past_poll (polls.tests.PollViewTests)
0.0036s test_index_view_with_no_polls (polls.tests.PollViewTests)
0.0003s test_was_published_recently_with_future_poll (polls.tests.PollMethodTests)
0.0002s test_was_published_recently_with_recent_poll (polls.tests.PollMethodTests)
0.0002s test_was_published_recently_with_old_poll (polls.tests.PollMethodTests)

<强> UPDATE-1

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

<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;
}

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

1 个答案: