制作餐厅菜单，但点和<sup>无效

时间：2019-04-18 18:17:58

标签： jquery html css list html-lists

我一直在制作一家餐厅网站进行练习，并使用em，strong和sup标签制作了菜单，效果很好，但是与CSS和/或JQuery冲突，我似乎找不到该部分我的代码不起作用。 sup标签的行为很奇怪，点贯穿了整个过程。

我已经弄乱了margin，padding和其他标签，甚至是文本对齐，但是我似乎找不到它。

//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>

2 个答案:

答案 0 :(得分：0)

请关注

css 

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

strong {
}

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

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

答案 1 :(得分：0)

我相信您正在寻找类似的东西。将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; }删除了列表项目符号。

相关问题
最新问题