CSS中的响应式下拉菜单

huangapple
go评论95阅读模式
英文:

Responsive dropdown menu in CSS

问题

我正在尝试在CSS中实现一个下拉菜单。它几乎完成了，但我需要在下拉菜单下面的项目上移，以便为下拉菜单的项目腾出空间。当我关闭下拉菜单时，我希望项目再次上移，就像在显示下拉菜单之前一样。

以下是我使用的代码：

  1. <!-- 开始代码片段: js hide: false console: true babel: false -->
  3. <!-- language: lang-js -->
  4. function toggleDropdown(id) {
  5.   var dropdown = document.getElementById(id);
  6.   dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
  7. }
  9. document.addEventListener('click', function(event) {
  10.   var dropdown = document.getElementById('introduccion-dropdown');
  11.   var trigger = document.querySelector('.dropdown');
  12.   if (!trigger.contains(event.target)) {
  13.     dropdown.style.display = 'none';
  14.   }
  15. });
  17. <!-- language: lang-css -->
  18. @import url('font-sets.css');
  19. @import url('common.css');
  21. /* 下拉菜单的样式 */
  23. * {
  24.     list-style: none;
  25. }
  27. .dropdown-content {
  28.     display: none;
  29.     position: absolute;
  30.     min-width: 160px;
  31.     z-index: 1;
  32.     top: 70%;
  33.     left: 50%;
  34.     transform: translate(-50%, -50%);
  35.     left: 49%;
  36. }
  37.   
  38. .dropdown-content li {
  39.     display: block;
  40. }
  42. .items-below-dropdown {
  43.     position: relative;
  44.     margin-top: 400px; /* 根据下拉菜单的高度调整值 */
  45. }
  47. /* 课程和测试卡片的样式 */
  49. .button-stack {
  50.     margin-top: 20px;
  51.     display: flex;
  52.     flex-direction: column;
  53.     align-items: center;
  54. }
  55.   
  56. .card {
  57.     background-color: var(--primary-color);
  58.     color: var(--text-color);
  59.     position: relative;
  60.     width: 700px;
  61.     height: 113px;
  62.     border-radius: 15px;
  63.     border: none;
  64.     box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  65.     font-size: 24px;
  66.     display: flex;
  67.     justify-content: center;
  68.     align-items: center;
  69.     margin-bottom: 20px;
  70.     cursor: pointer;
  71.     transition: transform 0.2s;
  72. }
  74. .card:hover {
  75.     transform: scale(1.15);
  76. }
  78. .card::before {
  79.     content: "";
  80.     position: absolute;
  81.     top: 10%;
  82.     bottom: 10%;
  83.     left: 20%;
  84.     transform: translateX(-50%);
  85.     width: 2px;
  86.     background-color: var(--text-color);
  87. }
  89. .card .number, 
  90. .card .letter {
  91.     position: absolute;
  92.     top: 50%;
  93.     left: 10%;
  94.     transform: translate(-50%, -50%);
  95.     font-size: 48px;
  96.     font-weight: bold;
  97. }
  99. .card-content {
  100.     width: 55%;
  101.     padding: 0 20px;
  102.     display: flex;
  103.     flex-direction: column;
  104.     justify-content: center;
  105.     align-items: flex-start;
  106. }
  107.   
  108. .card-title {
  109.     font-size: 25px;
  110.     font-weight: bold;
  111.     margin-bottom: 10px;
  112. }
  113.   
  114. .card-subtitle {
  115.     font-size: 18px;
  116.     color: var(--text-color);
  117. }
  118.   
  119. .lesson-card {
  120.     width: 600px;
  121.     height: 90px;
  122.     background: var(--primary-color);
  123.     color: var(--text-color);
  124. }
  125.   
  126. .test-card {
  127.     width: 600px;
  128.     height: 90px;
  129.     background: var(--accent-color);
  130.     color: var(--text-color);
  131. }
  133. <!-- language: lang-html -->
  134. <div class="button-stack">
  135.   <li class="dropdown">
  136.     <button type="submit" class="card" onclick="toggleDropdown('introduction-dropdown')">
  137.       <div class="card-content">
  138.         <h2 class="card-title">Introduccion a Haskell</h2>
  139.       </div>
  140.       <div class="card-divider"></div>
  141.       <span class="letter">1</span>
  142.     </button>
  143.       <ul class="dropdown-content" id="introduction-dropdown">
  144.         <li>
  145.           <form action="/home" method="post">
  146.             <input type="hidden" name="lesson_id" value="1">
  147.             <button type="submit" class="card lesson-card">
  148.               <div class="card-content">
  149.                 <h2 class="card-title">Titulo de leccion</h2>
  150.               </div>
  151.               <div class="card-divider"></div>
  152.               <span class="number">1.1</span>
  153.             </button>
  154.           </form>
  155.         </li>
  156.         <!-- 其他下拉项目... -->
  157.       </ul>  
  158.   </li>
  159.   <div class="items-below-dropdown">
  160.     <!-- 下面的项目... -->
  161.   </div>  
  162. </div>
  164. <!-- 结束代码片段 -->

我尝试更改margin-top属性，但无论我是否按下下拉按钮，它只会将项目向下移动。我需要在按下下拉按钮时能够响应的解决方案。也许是一个JavaScript函数，但我不是JavaScript的专家。

英文:

I'm trying to implement a dropdown menu in CSS. It's pretty much done, but I need the items which are below the dropdown to move down so there's room for the dropdown items. And when I close the dropdown menu, I want the items to go up again just as they were before the dropdown was shown.

Here's the code I used:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. function toggleDropdown(id) {
  2. var dropdown = document.getElementById(id);
  3. dropdown.style.display = dropdown.style.display === &#39;block&#39; ? &#39;none&#39; : &#39;block&#39;;
  4. }
  5. document.addEventListener(&#39;click&#39;, function(event) {
  6. var dropdown = document.getElementById(&#39;introduccion-dropdown&#39;);
  7. var trigger = document.querySelector(&#39;.dropdown&#39;);
  8. if (!trigger.contains(event.target)) {
  9. dropdown.style.display = &#39;none&#39;;
  10. }
  11. });

<!-- language: lang-css -->

  1. @import url(&#39;font-sets.css&#39;);
  2. @import url(&#39;common.css&#39;);
  3. /* Styles for the dropdown menu */
  4. * {
  5. list-style: none;
  6. }
  7. .dropdown-content {
  8. display: none;
  9. position: absolute;
  10. min-width: 160px;
  11. z-index: 1;
  12. top: 70%;
  13. left: 50%;
  14. transform: translate(-50%, -50%);
  15. left: 49%;
  16. }
  17. .dropdown-content li {
  18. display: block;
  19. }
  20. .items-below-dropdown {
  21. position: relative;
  22. margin-top: 400px; /* Adjust the value based on the height of the dropdown menu */
  23. }
  24. /* Styles for the lesson and test cards */
  25. .button-stack {
  26. margin-top: 20px;
  27. display: flex;
  28. flex-direction: column;
  29. align-items: center;
  30. }
  31. .card {
  32. background-color: var(--primary-color);
  33. color: var(--text-color);
  34. position: relative;
  35. width: 700px;
  36. height: 113px;
  37. border-radius: 15px;
  38. border: none;
  39. box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  40. font-size: 24px;
  41. display: flex;
  42. justify-content: center;
  43. align-items: center;
  44. margin-bottom: 20px;
  45. cursor: pointer;
  46. transition: transform 0.2s;
  47. }
  48. .card:hover {
  49. transform: scale(1.15);
  50. }
  51. .card::before {
  52. content: &quot;&quot;;
  53. position: absolute;
  54. top: 10%;
  55. bottom: 10%;
  56. left: 20%;
  57. transform: translateX(-50%);
  58. width: 2px;
  59. background-color: var(--text-color);
  60. }
  61. .card .number, 
  62. .card .letter {
  63. position: absolute;
  64. top: 50%;
  65. left: 10%;
  66. transform: translate(-50%, -50%);
  67. font-size: 48px;
  68. font-weight: bold;
  69. }
  70. .card-content {
  71. width: 55%;
  72. padding: 0 20px;
  73. display: flex;
  74. flex-direction: column;
  75. justify-content: center;
  76. align-items: flex-start;
  77. }
  78. .card-title {
  79. font-size: 25px;
  80. font-weight: bold;
  81. margin-bottom: 10px;
  82. }
  83. .card-subtitle {
  84. font-size: 18px;
  85. color: var(--text-color);
  86. }
  87. .lesson-card {
  88. width: 600px;
  89. height: 90px;
  90. background: var(--primary-color);
  91. color: var(--text-color);
  92. }
  93. .test-card {
  94. width: 600px;
  95. height: 90px;
  96. background: var(--accent-color);
  97. color: var(--text-color);
  98. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;button-stack&quot;&gt;
  2. &lt;li class=&quot;dropdown&quot;&gt;
  3. &lt;button type=&quot;submit&quot; class=&quot;card&quot; onclick=&quot;toggleDropdown(&#39;introduction-dropdown&#39;)&quot;&gt;
  4. &lt;div class=&quot;card-content&quot;&gt;
  5. &lt;h2 class=&quot;card-title&quot;&gt;Introduccion a Haskell&lt;/h2&gt;
  6. &lt;/div&gt;
  7. &lt;div class=&quot;card-divider&quot;&gt;&lt;/div&gt;
  8. &lt;span class=&quot;letter&quot;&gt;1&lt;/span&gt;
  9. &lt;/button&gt;
  10. &lt;ul class=&quot;dropdown-content&quot; id=&quot;introduction-dropdown&quot;&gt;
  11. &lt;li&gt;
  12. &lt;form action=&quot;/home&quot; method=&quot;post&quot;&gt;
  13. &lt;input type=&quot;hidden&quot; name=&quot;lesson_id&quot; value=&quot;1&quot;&gt;
  14. &lt;button type=&quot;submit&quot; class=&quot;card lesson-card&quot;&gt;
  15. &lt;div class=&quot;card-content&quot;&gt;
  16. &lt;h2 class=&quot;card-title&quot;&gt;Titulo de leccion&lt;/h2&gt;
  17. &lt;/div&gt;
  18. &lt;div class=&quot;card-divider&quot;&gt;&lt;/div&gt;
  19. &lt;span class=&quot;number&quot;&gt;1.1&lt;/span&gt;
  20. &lt;/button&gt;
  21. &lt;/form&gt;
  22. &lt;/li&gt;
  23. &lt;li&gt;
  24. &lt;form action=&quot;/home&quot; method=&quot;post&quot;&gt;
  25. &lt;input type=&quot;hidden&quot; name=&quot;lesson_id&quot; value=&quot;1&quot;&gt;
  26. &lt;button type=&quot;submit&quot; class=&quot;card lesson-card&quot;&gt;
  27. &lt;div class=&quot;card-content&quot;&gt;
  28. &lt;h2 class=&quot;card-title&quot;&gt;Titulo de leccion&lt;/h2&gt;
  29. &lt;/div&gt;
  30. &lt;div class=&quot;card-divider&quot;&gt;&lt;/div&gt;
  31. &lt;span class=&quot;number&quot;&gt;1.2&lt;/span&gt;
  32. &lt;/button&gt;
  33. &lt;/form&gt;
  34. &lt;/li&gt;
  35. &lt;li&gt;
  36. &lt;form action=&quot;/home&quot; method=&quot;post&quot;&gt;
  37. &lt;input type=&quot;hidden&quot; name=&quot;lesson_id&quot; value=&quot;1&quot;&gt;
  38. &lt;button type=&quot;submit&quot; class=&quot;card lesson-card&quot;&gt;
  39. &lt;div class=&quot;card-content&quot;&gt;
  40. &lt;h2 class=&quot;card-title&quot;&gt;Titulo de leccion&lt;/h2&gt;
  41. &lt;/div&gt;
  42. &lt;div class=&quot;card-divider&quot;&gt;&lt;/div&gt;
  43. &lt;span class=&quot;number&quot;&gt;1.3&lt;/span&gt;
  44. &lt;/button&gt;
  45. &lt;/form&gt;
  46. &lt;/li&gt;
  47. &lt;li&gt;
  48. &lt;form action=&quot;/home&quot; method=&quot;post&quot;&gt;
  49. &lt;input type=&quot;hidden&quot; name=&quot;test_id&quot; value=&quot;1&quot;&gt;
  50. &lt;button type=&quot;submit&quot; class=&quot;card test-card&quot;&gt;
  51. &lt;div class=&quot;card-content&quot;&gt;
  52. &lt;h2 class=&quot;card-title&quot;&gt;Test&lt;/h2&gt;
  53. &lt;h3 class=&quot;card-subtitle&quot;&gt;Temas del test&lt;/h3&gt;
  54. &lt;/div&gt;
  55. &lt;div class=&quot;card-divider&quot;&gt;&lt;/div&gt;
  56. &lt;span class=&quot;letter&quot;&gt;1.A&lt;/span&gt;
  57. &lt;/button&gt;
  58. &lt;/form&gt;
  59. &lt;/li&gt;
  60. &lt;/ul&gt;  
  61. &lt;/li&gt;
  62. &lt;div class=&quot;items-below-dropdown&quot;&gt;
  63. &lt;li&gt;
  64. &lt;button type=&quot;submit&quot; class=&quot;card&quot;&gt;
  65. &lt;div class=&quot;card-content&quot;&gt;
  66. &lt;h2 class=&quot;card-title&quot;&gt;Funciones&lt;/h2&gt;
  67. &lt;/div&gt;
  68. &lt;div class=&quot;card-divider&quot;&gt;&lt;/div&gt;
  69. &lt;span class=&quot;letter&quot;&gt;2&lt;/span&gt;
  70. &lt;/button&gt;
  71. &lt;/li&gt;
  72. &lt;li&gt;
  73. &lt;button type=&quot;submit&quot; class=&quot;card&quot;&gt;
  74. &lt;div class=&quot;card-content&quot;&gt;
  75. &lt;h2 class=&quot;card-title&quot;&gt;Monadas&lt;/h2&gt;
  76. &lt;/div&gt;
  77. &lt;div class=&quot;card-divider&quot;&gt;&lt;/div&gt;
  78. &lt;span class=&quot;letter&quot;&gt;3&lt;/span&gt;
  79. &lt;/button&gt;
  80. &lt;/li&gt;
  81. &lt;li&gt;
  82. &lt;button type=&quot;submit&quot; class=&quot;card&quot;&gt;
  83. &lt;div class=&quot;card-content&quot;&gt;
  84. &lt;h2 class=&quot;card-title&quot;&gt;Functores&lt;/h2&gt;
  85. &lt;/div&gt;
  86. &lt;div class=&quot;card-divider&quot;&gt;&lt;/div&gt;
  87. &lt;span class=&quot;letter&quot;&gt;4&lt;/span&gt;
  88. &lt;/button&gt;
  89. &lt;/li&gt;
  90. &lt;/div&gt;  
  91. &lt;/div&gt;

<!-- end snippet -->

I tried changing the margin-top attribute, but that only moves the items down, no matter if I press the dropdown button or not. I need something that can respond when the dropdown button is pressed. Maybe is a JS function, but I'm no expert at JavaScript

答案1

得分: 0

尝试这个。我刚刚移除了所有的 position: absolute 部分和那个大的 margin-top。没有添加任何内容，我只是注释掉了一些 CSS 行，我用 /*COMMENTED OUT*/ 标记了它们，所以很容易找到。

英文:

Try this. I just removed all the position: absolute stuff and that big margin-top. Nothing was added, I only commented out a few lines of CSS, which I marked with /*COMMENTED OUT*/ so it's easy to find.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. function toggleDropdown(id) {
  2. var dropdown = document.getElementById(id);
  3. dropdown.style.display = dropdown.style.display === &#39;block&#39; ? &#39;none&#39; : &#39;block&#39;;
  4. }
  5. document.addEventListener(&#39;click&#39;, function(event) {
  6. var dropdown = document.getElementById(&#39;introduccion-dropdown&#39;);
  7. var trigger = document.querySelector(&#39;.dropdown&#39;);
  8. if (!trigger.contains(event.target)) {
  9. dropdown.style.display = &#39;none&#39;;
  10. }
  11. });

<!-- language: lang-css -->

  1. @import url(&#39;font-sets.css&#39;);
  2. @import url(&#39;common.css&#39;);
  3. /* Styles for the dropdown menu */
  4. * {
  5. list-style: none;
  6. }
  7. .dropdown-content {
  8. display: none;
  9. /*COMMENTED OUT*/
  10. /*position: absolute;*/
  11. min-width: 160px;
  12. z-index: 1;
  13. /*COMMENTED OUT*/
  14. /*top: 70%;
  15. left: 50%;
  16. transform: translate(-50%, -50%);
  17. left: 49%;*/
  18. }
  19. .dropdown-content li {
  20. display: block;
  21. }
  22. .items-below-dropdown {
  23. position: relative;
  24. /*COMMENTED OUT*/
  25. /*margin-top: 400px;*/ /* Adjust the value based on the height of the dropdown menu */
  26. }
  27. /* Styles for the lesson and test cards */
  28. .button-stack {
  29. margin-top: 20px;
  30. display: flex;
  31. flex-direction: column;
  32. align-items: center;
  33. }
  34. .card {
  35. background-color: var(--primary-color);
  36. color: var(--text-color);
  37. position: relative;
  38. width: 700px;
  39. height: 113px;
  40. border-radius: 15px;
  41. border: none;
  42. box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  43. font-size: 24px;
  44. display: flex;
  45. justify-content: center;
  46. align-items: center;
  47. margin-bottom: 20px;
  48. cursor: pointer;
  49. transition: transform 0.2s;
  50. }
  51. .card:hover {
  52. transform: scale(1.15);
  53. }
  54. .card::before {
  55. content: &quot;&quot;;
  56. position: absolute;
  57. top: 10%;
  58. bottom: 10%;
  59. left: 20%;
  60. transform: translateX(-50%);
  61. width: 2px;
  62. background-color: var(--text-color);
  63. }
  64. .card .number, 
  65. .card .letter {
  66. /*COMMENTED OUT*/
  67. /*position: absolute;
  68. top: 50%;
  69. left: 10%;
  70. transform: translate(-50%, -50%);*/
  71. font-size: 48px;
  72. font-weight: bold;
  73. }
  74. .card-content {
  75. width: 55%;
  76. padding: 0 20px;
  77. display: flex;
  78. flex-direction: column;
  79. justify-content: center;
  80. align-items: flex-start;
  81. }
  82. .card-title {
  83. font-size: 25px;
  84. font-weight: bold;
  85. margin-bottom: 10px;
  86. }
  87. .card-subtitle {
  88. font-size: 18px;
  89. color: var(--text-color);
  90. }
  91. .lesson-card {
  92. width: 600px;
  93. height: 90px;
  94. background: var(--primary-color);
  95. color: var(--text-color);
  96. }
  97. .test-card {
  98. width: 600px;
  99. height: 90px;
  100. background: var(--accent-color);
  101. color: var(--text-color);
  102. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;button-stack&quot;&gt;
  2. &lt;li class=&quot;dropdown&quot;&gt;
  3. &lt;button type=&quot;submit&quot; class=&quot;card&quot; onclick=&quot;toggleDropdown(&#39;introduction-dropdown&#39;)&quot;&gt;
  4. &lt;div class=&quot;card-content&quot;&gt;
  5. &lt;h2 class=&quot;card-title&quot;&gt;Introduccion a Haskell&lt;/h2&gt;
  6. &lt;/div&gt;
  7. &lt;div class=&quot;card-divider&quot;&gt;&lt;/div&gt;
  8. &lt;span class=&quot;letter&quot;&gt;1&lt;/span&gt;
  9. &lt;/button&gt;
  10. &lt;ul class=&quot;dropdown-content&quot; id=&quot;introduction-dropdown&quot;&gt;
  11. &lt;li&gt;
  12. &lt;form action=&quot;/home&quot; method=&quot;post&quot;&gt;
  13. &lt;input type=&quot;hidden&quot; name=&quot;lesson_id&quot; value=&quot;1&quot;&gt;
  14. &lt;button type=&quot;submit&quot; class=&quot;card lesson-card&quot;&gt;
  15. &lt;div class=&quot;card-content&quot;&gt;
  16. &lt;h2 class=&quot;card-title&quot;&gt;Titulo de leccion&lt;/h2&gt;
  17. &lt;/div&gt;
  18. &lt;div class=&quot;card-divider&quot;&gt;&lt;/div&gt;
  19. &lt;span class=&quot;number&quot;&gt;1.1&lt;/span&gt;
  20. &lt;/button&gt;
  21. &lt;/form&gt;
  22. &lt;/li&gt;
  23. &lt;li&gt;
  24. &lt;form action=&quot;/home&quot; method=&quot;post&quot;&gt;
  25. &lt;input type=&quot;hidden&quot; name=&quot;lesson_id&quot; value=&quot;1&quot;&gt;
  26. &lt;button type=&quot;submit&quot; class=&quot;card lesson-card&quot;&gt;
  27. &lt;div class=&quot;card-content&quot;&gt;
  28. &lt;h2 class=&quot;card-title&quot;&gt;Titulo de leccion&lt;/h2&gt;
  29. &lt;/div&gt;
  30. &lt;div class=&quot;card-divider&quot;&gt;&lt;/div&gt;
  31. &lt;span class=&quot;number&quot;&gt;1.2&lt;/span&gt;
  32. &lt;/button&gt;
  33. &lt;/form&gt;
  34. &lt;/li&gt;
  35. &lt;li&gt;
  36. &lt;form action=&quot;/home&quot; method=&quot;post&quot;&gt;
  37. &lt;input type=&quot;hidden&quot; name=&quot;lesson_id&quot; value=&quot;1&quot;&gt;
  38. &lt;button type=&quot;submit&quot; class=&quot;card lesson-card&quot;&gt;
  39. &lt;div class=&quot;card-content&quot;&gt;
  40. &lt;h2 class=&quot;card-title&quot;&gt;Titulo de leccion&lt;/h2&gt;
  41. &lt;/div&gt;
  42. &lt;div class=&quot;card-divider&quot;&gt;&lt;/div&gt;
  43. &lt;span class=&quot;number&quot;&gt;1.3&lt;/span&gt;
  44. &lt;/button&gt;
  45. &lt;/form&gt;
  46. &lt;/li&gt;
  47. &lt;li&gt;
  48. &lt;form action=&quot;/home&quot; method=&quot;post&quot;&gt;
  49. &lt;input type=&quot;hidden&quot; name=&quot;test_id&quot; value=&quot;1&quot;&gt;
  50. &lt;button type=&quot;submit&quot; class=&quot;card test-card&quot;&gt;
  51. &lt;div class=&quot;card-content&quot;&gt;
  52. &lt;h2 class=&quot;card-title&quot;&gt;Test&lt;/h2&gt;
  53. &lt;h3 class=&quot;card-subtitle&quot;&gt;Temas del test&lt;/h3&gt;
  54. &lt;/div&gt;
  55. &lt;div class=&quot;card-divider&quot;&gt;&lt;/div&gt;
  56. &lt;span class=&quot;letter&quot;&gt;1.A&lt;/span&gt;
  57. &lt;/button&gt;
  58. &lt;/form&gt;
  59. &lt;/li&gt;
  60. &lt;/ul&gt;  
  61. &lt;/li&gt;
  62. &lt;div class=&quot;items-below-dropdown&quot;&gt;
  63. &lt;li&gt;
  64. &lt;button type=&quot;submit&quot; class=&quot;card&quot;&gt;
  65. &lt;div class=&quot;card-content&quot;&gt;
  66. &lt;h2 class=&quot;card-title&quot;&gt;Funciones&lt;/h2&gt;
  67. &lt;/div&gt;
  68. &lt;div class=&quot;card-divider&quot;&gt;&lt;/div&gt;
  69. &lt;span class=&quot;letter&quot;&gt;2&lt;/span&gt;
  70. &lt;/button&gt;
  71. &lt;/li&gt;
  72. &lt;li&gt;
  73. &lt;button type=&quot;submit&quot; class=&quot;card&quot;&gt;
  74. &lt;div class=&quot;card-content&quot;&gt;
  75. &lt;h2 class=&quot;card-title&quot;&gt;Monadas&lt;/h2&gt;
  76. &lt;/div&gt;
  77. &lt;div class=&quot;card-divider&quot;&gt;&lt;/div&gt;
  78. &lt;span class=&quot;letter&quot;&gt;3&lt;/span&gt;
  79. &lt;/button&gt;
  80. &lt;/li&gt;
  81. &lt;li&gt;
  82. &lt;button type=&quot;submit&quot; class=&quot;card&quot;&gt;
  83. &lt;div class=&quot;card-content&quot;&gt;
  84. &lt;h2 class=&quot;card-title&quot;&gt;Functores&lt;/h2&gt;
  85. &lt;/div&gt;
  86. &lt;div class=&quot;card-divider&quot;&gt;&lt;/div&gt;
  87. &lt;span class=&quot;letter&quot;&gt;4&lt;/span&gt;
  88. &lt;/button&gt;
  89. &lt;/li&gt;
  90. &lt;/div&gt;  
  91. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月21日 02:27:59
  • 转载请务必保留本文链接：https://go.coder-hub.com/76296788.html
  • css
  • dropdown
  • html
  • javascript
  • sinatra
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定