也就是,中间有一个 DIV(固定宽度),每边有 3 个链接,就像附件一样。
我确信这可以通过绝对定位和旋转每个 :nth-child 元素来完成,但这可能会变得困惑,我想知道是否有人知道任何更清洁的解决方案?
<ul class="menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<div class="text">
Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum
</div>
Fiddle 是这样的:https://jsfiddle.net/am2o3og1/
最佳答案
HTML
<ul class="menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<div class="text">
Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum
</div>
<ul class="menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
CSS:
.text {
width: 130px;
margin: 0 auto;
background-color: lightblue;
color: white;
text-align: center;
float:left;
}
.menu {
list-style-type: none;
margin: 0;
padding: 0;
float:left;
}
.menu li {
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
}
.menu li + li, .text + .menu li + li {
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
transform: rotate(0deg);
}
.menu li + li + li {
-ms-transform: rotate(-7deg); /* IE 9 */
-webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
transform: rotate(-7deg);
}
.text + .menu li {
-ms-transform: rotate(-7deg); /* IE 9 */
-webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
transform: rotate(-7deg);
}
.text + .menu li + li + li {
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
}
关于jquery - DIV 两侧的 CSS 菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32782450/