我下面有一个按钮和一个 ul,ul 设置为不显示,我想做的是当我单击按钮时,ul 显示为白色背景,我希望按钮采用与ul,我希望 ul 的宽度与按钮的宽度相同,我该怎么做? 这是我的代码:
$("button").click(function () {
$("ul").show();
});
ul{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button> Hello </button>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
</ul>
最佳答案
i want the button to take the same styling as the ul
将 CSS 样式应用于按钮。现在,唯一的区别似乎是 font-family
。
i want the ul's width to be the same as the button's width
使用 CSS 将按钮的 width
设置为与无序列表相同。
无序列表向右移动,因为有左填充。减少 padding-left
以减少元素移动的距离。 width
和 padding-left
应该加起来等于按钮的 width
。
我已经为您添加了一些 CSS。请随意使用它。
$("button").click(function () {
$("ul").show();
});
ul {
display: none;
width: 85px;
padding-left: 15px;
}
button {
font-family: serif;
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Hello</button>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
</ul>
关于css - 单击按钮时显示 ul,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43034884/