css - 单击按钮时显示 ul

Question

我下面有一个按钮和一个 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>

Answer 1

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>