我想在水平菜单项的列表项之间留出相等的空间 .我试图给他们 margin 和 padding 但似乎没有任何效果。 如何在这些圆形按钮之间做到这一点？
以及如何在按下时改变颜色并保持不变直到我向前或向后移动到其他东西？ 这是我的代码片段......
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Dialog: Hide the Close Button/Title Bar</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<style type="text/css">
.mySlider
{
//
}
.shadow_div
{
//
}
.mySlider img
{
//
}
.Parent_Slider > a
{
text-decoration:none;
font-weight:bold;
width:32px;
height:32px;
position:absolute;
top:50%;
text-indent:-9999px;
}
.Next_Class
{
right:250px;
background-image:url(Images/rightarrow.jpg);
}
.Prev_Class
{
left:250px;
background-image:url(Images/leftarrow.jpg);
}
ul.Round_Buttons
{
position:relative;
left:40%;
top:5px;
text-decoration:none;
list-style-type:none;
}
ul.Round_Buttons li
{
float:left;
background-color:red;
margin:0px 0px 3px 0px;
border-radius:50%;
}
</style>
<script type="text/javascript">
//
</script>
</head>
<body>
<div class="Parent_Slider">
<div id="my_image_slider" class="mySlider">
<img id="1" src="Images/bmw.jpg" alt="" title="Audi India"/>
<img id="2" src="Images/audi.jpg" alt="" title="BMW India" />
<img id="3" src="Images/aston-martin.jpg" alt="" title="Aston-Martin APAC" />
<img id="4" src="Images/bugatti.jpg" alt="" title="Buggatti APAC" />
<img id="5" src="Images/koenigsegg.jpg" alt="" title="Koenigsegg APAC" />
</div>
<a href="#" class="Next_Class">Next</a>
<a href="#" class="Prev_Class">Prev</a>
</div>
<div class="shadow_div" >
<ul class="Round_Buttons">
<li id="1st_Round"><a href="#">1</a></li>
<li id="2nd_Round"><a href="#">2</a></li>
<li id="3rd_Round"><a href="#">3</a></li>
</ul>
</div>
</body>
</html>
最佳答案
我刚刚修改了一个类，如下所示。它对我来说工作正常。
ul.Round_Buttons li
{
float:left;
background-color:red;
margin:0px 0px 3px 10px;
padding:0px 10px;
border-radius:50%;
}
关于html - 如何在水平菜单的列表项之间添加空格？并在按下时给出特定的颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23510586/