jquery - 制作餐厅菜单，但点和 <sup> 不起作用

标签 jquery html css list html-lists

我一直在制作一个餐厅网站进行练习，并使用 em、strong 和 sup 标签制作菜单，效果很好，但它与我的 CSS 和/或 JQuery 冲突，我似乎找不到哪个部分我的代码不工作。 sup 标签表现得很奇怪，点贯穿整个事物。

我弄乱了 margin 和 padding 以及其他标签，甚至是 text-align，但我似乎找不到它是什么。

//hide all the pages and display the home page
$('.page').hide();
$($('.page')[0]).show();
$($('.page-button')[0]).addClass('selected');

//this block of code switches the pages. it works no matter how many pages or page buttons there are, making it easy to add and remove pages
$('.page-button').on('click', function() {
  $(this).addClass('selected');
  $('.page').hide();
  $($('.page')[parseInt($(this).attr('data-page_num')) - 1]).show(); //displays the page based on the value of data-page_num
  window.scrollTo(0, 0); //scroll to the  top of the page
});
body {
  background: rgb(204, 204, 255);
  font-family: "Open Sans", Sans Serif;
  font-weight: 300;
  color: ;
  margin: 0px;
}

ul li {
  display: inline-block;
  box-sizing: border-box;
  text-align: left;
}

.main-button {
  display: inline-block;
  width: 79px;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
  font-size: 16px;
}

.main-button:hover {
  background: rgba(255, 255, 255, 0.1);
  transition: 0.7s;
  cursor: pointer;
}

h3 {
  text-align: center;
  font-size: 22px;
}

a {}

.container {
  box-sizing: border-box;
  margin: auto;
  max-width: 600px;
  padding: 20px;
}

.button {
  background: rgb(0, 163, 222);
  display: inline-block;
  width: 130px;
  margin: 10px;
  padding: 10px;
  text-align: center;
  text-decoration: none;
}

.button:hover {
  background: rgb(0, 105, 242);
  transition: 0.25s;
  color: white;
  cursor: pointer;
}

a {
  color: black;
  decoration: none;
}

a:hover {
  color: white;
  transition: 0.5s;
}

.content1 {
  background: rgba(255, 255, 255, 0.15);
}

.content2 {
  background: rgba(255, 255, 255, 0.1);
}

.li {
  clear: both;
  margin: 0;
  padding: 0 0 1.8em 0;
  position: relative;
  border-bottom: dotted 2px #999;
}

strong {
  padding: 0 10px 0 0;
  font-weight: normal;
  position: absolute;
  bottom: -.3em;
  left: 0;
}

em {
  padding: 0 0 0 5px;
  font: 100% "Times New Roman", Sans-serif;
  position: absolute;
  bottom: -.2em;
  right: 0;
}

sup {
  font-size: 60%;
  color: #666;
  margin-left: 3px;
}
<div class="banner">
  <ul>
    <li>
      <h1>Silver Spoon</h1>
    </li>
    <a class='page-button' data-page_num='1' href='javascript:voide(0)'>
      <li class="main-button home-button">Home</li>
    </a>
    <a class='page-button' data-page_num='2' href='javascript:voide(0)'>
      <li class="main-button about-button">Menu</li>
    </a>
  </ul>
</div>
<div class="page">
  <div id="Home">
    <div class="content1">
      <div class="container">
        <a class='page-button' data-page_num='2' href='javascript:voide(0)'>
          <h3>Menu</h3>
        </a>
        <h4>Now introducing edible food.</h4>
        <p>Silver Spoon has a high-quality menu with affordable prices. Find out more on the menu page.</p>
      </div>
    </div>
  </div>
</div>
<div class="page">
  <div id="Menu">
    <div class="content1">
      <div class="container">
        <h3>Bakery</h3>
        <li class="li"><strong>Cheese Danish</strong> <em>2</em><sup>50</sup></li>
        <li class="li"><strong>Chocolate Chip Cookies</strong> <em>1</em><sup>50</sup></li>
        <li class="li"><strong>Glazed Donuts</strong> <em>2</em><sup>00</sup></li>
        <li class="li"><strong>Everything Bagels</strong> <em>2</em><sup>00</sup></li>
        <li class="li"><strong>Plain Bagels</strong> <em>1</em><sup>50</sup></li>
      </div>
    </div>
    <div class="content2">
      <div class="container">
        <h3>Hot Breakfast</h3>
        <li class="li"><strong>Egg Sandwich</strong> <em>3</em><sup>50</sup></li>
        <li class="li"><strong>Chicken Sausage Sandwich</strong> <em>4</em><sup>50</sup></li>
        <li class="li"><strong>Egg Bites</strong> <em>4</em><sup>00</sup></li>
        <li class="li"><strong>Egg Wraps</strong> <em>4</em><sup>00</sup></li>
        <li class="li"><strong>Old-Fashioned Oatmeal</strong> <em>3</em><sup>50</sup></li>
      </div>
    </div>
    <div class="content1">
      <div class="container">
        <h3>Sandwiches</h3>
        <li class="li"><strong>Chicken Caprese</strong> <em>4</em><sup>50</sup></li>
        <li class="li"><strong>Chicken Sandwich</strong> <em>4</em><sup>00</sup></li>
        <li class="li"><strong>Hamburger</strong> <em>2</em><sup>50</sup></li>
        <li class="li"><strong>Ham & Swiss Panini</strong> <em>3</em><sup>00</sup></li>
      </div>
    </div>
    <div class="content2">
      <div class="container">
        <h3>Deserts</h3>
        <li class="li"><strong>Cookies</strong> <em>1</em><sup>50</sup></li>
        <li class="li"><strong>Cake</strong> <em>3</em><sup>50</sup></li>
        <li class="li"><strong>Ice Cream</strong> <em>1</em><sup>99</sup></li>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

最佳答案

我相信您正在寻找这样的东西。将 sup 和 em 分组到一个 div 中并添加以下属性:

.price {
  position: relative;
  top: .9em;
  float: right;
}

此外，您应该将其更改为具有 position: relative 而不是 position: absolute 以便它相对于 li 元素定位。然后，它应该位于距顶部 .9em 的位置(或您添加的填充的 1/2)。

//hide all the pages and display the home page
$('.page').hide();
$($('.page')[0]).show();
$($('.page-button')[0]).addClass('selected');

//this block of code switches the pages. it works no matter how many pages or page buttons there are, making it easy to add and remove pages
$('.page-button').on('click', function() {
  $(this).addClass('selected');
  $('.page').hide();
  $($('.page')[parseInt($(this).attr('data-page_num')) - 1]).show(); //displays the page based on the value of data-page_num
  window.scrollTo(0, 0); //scroll to the  top of the page
});
body {
  background: rgb(204, 204, 255);
  font-family: "Open Sans", Sans Serif;
  font-weight: 300;
  color: ;
  margin: 0px;
}

ul, li {
  list-style-type: none;
}

ul li {
  display: inline-block;
  box-sizing: border-box;
  text-align: left;
}

.main-button {
  display: inline-block;
  width: 79px;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
  font-size: 16px;
}

.main-button:hover {
  background: rgba(255, 255, 255, 0.1);
  transition: 0.7s;
  cursor: pointer;
}

h3 {
  text-align: center;
  font-size: 22px;
}

a {}

.container {
  box-sizing: border-box;
  margin: auto;
  max-width: 600px;
  padding: 20px;
}

.button {
  background: rgb(0, 163, 222);
  display: inline-block;
  width: 130px;
  margin: 10px;
  padding: 10px;
  text-align: center;
  text-decoration: none;
}

.button:hover {
  background: rgb(0, 105, 242);
  transition: 0.25s;
  color: white;
  cursor: pointer;
}

a {
  color: black;
  decoration: none;
}

a:hover {
  color: white;
  transition: 0.5s;
}

.content1 {
  background: rgba(255, 255, 255, 0.15);
}

.content2 {
  background: rgba(255, 255, 255, 0.1);
}

.li {
  clear: both;
  margin: 0;
  padding: 0 0 1.8em 0;
  position: relative;
  border-bottom: dotted 2px #999;
}

strong {
  padding: 0 10px 0 0;
  font-weight: normal;
  position: absolute;
  bottom: -.3em;
  left: 0;
}

em {
  padding: 0 0 0 5px;
  font: 100% "Times New Roman", Sans-serif;
}

sup {
  font-size: 60%;
  color: #666;
  margin-left: 3px;
}

.price {
  position: relative;
  top: .9em;
  float: right;
}
<div class="banner">
  <ul>
    <li>
      <h1>Silver Spoon</h1>
    </li>
    <a class='page-button' data-page_num='1' href='javascript:voide(0)'>
      <li class="main-button home-button">Home</li>
    </a>
    <a class='page-button' data-page_num='2' href='javascript:voide(0)'>
      <li class="main-button about-button">Menu</li>
    </a>
  </ul>
</div>
<div class="page">
  <div id="Home">
    <div class="content1">
      <div class="container">
        <a class='page-button' data-page_num='2' href='javascript:voide(0)'>
          <h3>Menu</h3>
        </a>
        <h4>Now introducing edible food.</h4>
        <p>Silver Spoon has a high-quality menu with affordable prices. Find out more on the menu page.</p>
      </div>
    </div>
  </div>
</div>
<div class="page">
  <div id="Menu">
    <div class="content1">
      <div class="container">
        <h3>Bakery</h3>
        <li class="li"><strong>Cheese Danish</strong><div class="price"><em>2</em><sup>50</sup></div></li>
        <li class="li"><strong>Chocolate Chip Cookies</strong><div class="price"><em>1</em><sup>50</sup></div></li>
        <li class="li"><strong>Glazed Donuts</strong><div class="price"><em>2</em><sup>00</sup></div></li>
        <li class="li"><strong>Everything Bagels</strong><div class="price"><em>2</em><sup>00</sup></div></li>
        <li class="li"><strong>Plain Bagels</strong><div class="price"><em>1</em><sup>50</sup></div></li>
      </div>
    </div>
    <div class="content2">
      <div class="container">
        <h3>Hot Breakfast</h3>
        <li class="li"><strong>Egg Sandwich</strong><div class="price"><em>3</em><sup>50</sup></div></li>
        <li class="li"><strong>Chicken Sausage Sandwich</strong><div class="price"><em>4</em><sup>50</sup></div></li>
        <li class="li"><strong>Egg Bites</strong><div class="price"><em>4</em><sup>00</sup></div></li>
        <li class="li"><strong>Egg Wraps</strong><div class="price"><em>4</em><sup>00</sup></div></li>
        <li class="li"><strong>Old-Fashioned Oatmeal</strong><div class="price"><em>3</em><sup>50</sup></div></li>
      </div>
    </div>
    <div class="content1">
      <div class="container">
        <h3>Sandwiches</h3>
        <li class="li"><strong>Chicken Caprese</strong><div class="price"><em>4</em><sup>50</sup></div></li>
        <li class="li"><strong>Chicken Sandwich</strong><div class="price"><em>4</em><sup>00</sup></div></li>
        <li class="li"><strong>Hamburger</strong><div class="price"><em>2</em><sup>50</sup></div></li>
        <li class="li"><strong>Ham & Swiss Panini</strong><div class="price"><em>3</em><sup>00</sup></div></li>
      </div>
    </div>
    <div class="content2">
      <div class="container">
        <h3>Deserts</h3>
        <li class="li"><strong>Cookies</strong><div class="price"><em>1</em><sup>50</sup></div></li>
        <li class="li"><strong>Cake</strong><div class="price"><em>3</em><sup>50</sup></div></li>
        <li class="li"><strong>Ice Cream</strong><div class="price"><em>1</em><sup>99</sup></div></li>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

我不确定您希望从 border-bottom 得到什么结果，但是您可以使用伪选择器限制边框的宽度。从 .li 元素中移除边框并添加:

.li::before {
  content: '';
  display: block;
  position: absolute;
  top: 100%;
  width: 30%;
  left: 0;
  border-bottom: dotted 2px #999;
}

只需更改伪选择器中的 width 即可限制边框的长度。

//hide all the pages and display the home page
$('.page').hide();
$($('.page')[0]).show();
$($('.page-button')[0]).addClass('selected');

//this block of code switches the pages. it works no matter how many pages or page buttons there are, making it easy to add and remove pages
$('.page-button').on('click', function() {
  $(this).addClass('selected');
  $('.page').hide();
  $($('.page')[parseInt($(this).attr('data-page_num')) - 1]).show(); //displays the page based on the value of data-page_num
  window.scrollTo(0, 0); //scroll to the  top of the page
});
body {
  background: rgb(204, 204, 255);
  font-family: "Open Sans", Sans Serif;
  font-weight: 300;
  color: ;
  margin: 0px;
}

ul, li {
  list-style-type: none;
}

ul li {
  display: inline-block;
  box-sizing: border-box;
  text-align: left;
}

.main-button {
  display: inline-block;
  width: 79px;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
  font-size: 16px;
}

.main-button:hover {
  background: rgba(255, 255, 255, 0.1);
  transition: 0.7s;
  cursor: pointer;
}

h3 {
  text-align: center;
  font-size: 22px;
}

a {}

.container {
  box-sizing: border-box;
  margin: auto;
  max-width: 600px;
  padding: 20px;
}

.button {
  background: rgb(0, 163, 222);
  display: inline-block;
  width: 130px;
  margin: 10px;
  padding: 10px;
  text-align: center;
  text-decoration: none;
}

.button:hover {
  background: rgb(0, 105, 242);
  transition: 0.25s;
  color: white;
  cursor: pointer;
}

a {
  color: black;
  decoration: none;
}

a:hover {
  color: white;
  transition: 0.5s;
}

.content1 {
  background: rgba(255, 255, 255, 0.15);
}

.content2 {
  background: rgba(255, 255, 255, 0.1);
}

.li {
  clear: both;
  margin: 0;
  padding: 0 0 1.8em 0;
  position: relative;
}

.li::before {
  content: '';
  display: block;
  position: absolute;
  top: 100%;
  width: 30%;
  left: 0;
  border-bottom: dotted 2px #999;
}

strong {
  padding: 0 10px 0 0;
  font-weight: normal;
  position: absolute;
  bottom: -.3em;
  left: 0;
}

em {
  padding: 0 0 0 5px;
  font: 100% "Times New Roman", Sans-serif;
}

sup {
  font-size: 60%;
  color: #666;
  margin-left: 3px;
}

.price {
  position: relative;
  top: .9em;
  float: right;
}
<div class="banner">
  <ul>
    <li>
      <h1>Silver Spoon</h1>
    </li>
    <a class='page-button' data-page_num='1' href='javascript:voide(0)'>
      <li class="main-button home-button">Home</li>
    </a>
    <a class='page-button' data-page_num='2' href='javascript:voide(0)'>
      <li class="main-button about-button">Menu</li>
    </a>
  </ul>
</div>
<div class="page">
  <div id="Home">
    <div class="content1">
      <div class="container">
        <a class='page-button' data-page_num='2' href='javascript:voide(0)'>
          <h3>Menu</h3>
        </a>
        <h4>Now introducing edible food.</h4>
        <p>Silver Spoon has a high-quality menu with affordable prices. Find out more on the menu page.</p>
      </div>
    </div>
  </div>
</div>
<div class="page">
  <div id="Menu">
    <div class="content1">
      <div class="container">
        <h3>Bakery</h3>
        <li class="li"><strong>Cheese Danish</strong><div class="price"><em>2</em><sup>50</sup></div></li>
        <li class="li"><strong>Chocolate Chip Cookies</strong><div class="price"><em>1</em><sup>50</sup></div></li>
        <li class="li"><strong>Glazed Donuts</strong><div class="price"><em>2</em><sup>00</sup></div></li>
        <li class="li"><strong>Everything Bagels</strong><div class="price"><em>2</em><sup>00</sup></div></li>
        <li class="li"><strong>Plain Bagels</strong><div class="price"><em>1</em><sup>50</sup></div></li>
      </div>
    </div>
    <div class="content2">
      <div class="container">
        <h3>Hot Breakfast</h3>
        <li class="li"><strong>Egg Sandwich</strong><div class="price"><em>3</em><sup>50</sup></div></li>
        <li class="li"><strong>Chicken Sausage Sandwich</strong><div class="price"><em>4</em><sup>50</sup></div></li>
        <li class="li"><strong>Egg Bites</strong><div class="price"><em>4</em><sup>00</sup></div></li>
        <li class="li"><strong>Egg Wraps</strong><div class="price"><em>4</em><sup>00</sup></div></li>
        <li class="li"><strong>Old-Fashioned Oatmeal</strong><div class="price"><em>3</em><sup>50</sup></div></li>
      </div>
    </div>
    <div class="content1">
      <div class="container">
        <h3>Sandwiches</h3>
        <li class="li"><strong>Chicken Caprese</strong><div class="price"><em>4</em><sup>50</sup></div></li>
        <li class="li"><strong>Chicken Sandwich</strong><div class="price"><em>4</em><sup>00</sup></div></li>
        <li class="li"><strong>Hamburger</strong><div class="price"><em>2</em><sup>50</sup></div></li>
        <li class="li"><strong>Ham & Swiss Panini</strong><div class="price"><em>3</em><sup>00</sup></div></li>
      </div>
    </div>
    <div class="content2">
      <div class="container">
        <h3>Deserts</h3>
        <li class="li"><strong>Cookies</strong><div class="price"><em>1</em><sup>50</sup></div></li>
        <li class="li"><strong>Cake</strong><div class="price"><em>3</em><sup>50</sup></div></li>
        <li class="li"><strong>Ice Cream</strong><div class="price"><em>1</em><sup>99</sup></div></li>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

注意:我还使用 ul, li { list-style-type: none; 删除了列表元素符号 以提高可读性。

关于jquery - 制作餐厅菜单，但点和 <sup> 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55751740/

上一篇：css - react-native scrollView 不适合我

下一篇：html - 如何制作没有任何顶部或底部填充的响应式视频横幅

相关文章：

jquery - 滚动时如何锁定页面？我如何在所有设备上显示粒子？

javascript - 即使数据确实返回，将 ajax 获取函数分配给变量也会返回未定义？

jquery - 对话框后面弹出 AnyTime Picker

jquery - 使用 AspNet.FriendlyUrls 和 AspNet.Identity 从 jquery.ajx 调用 webmethod 期间身份验证失败

javascript - 如何使用这个 jQuery 来影响 css 不透明度

jquery - 单击链接后隐藏响应式导航

javascript - 删除移动尺寸屏幕上的脚本操作

html - 如何仅在背景图像部分上方设置背景动画？

html - 在 CSS 中更改嵌入式 youtube 视频的位置

引用不存在的 HTML 数据属性时的 JavaScript 行为？

©2024 IT工具网  联系我们