如何在不中断菜单的情况下更改价格大小？

时间：2019-05-13 18:14:18

标签： javascript jquery html css css3

我一直在试图改变价格的大小，但是每当我这样做时，它都位于虚线上方，而不是停留在上方。

//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: #e6e6e6;
  font-family: "Open Sans", Sans Serif;
  font-weight: 300;
  color: #febd44;
  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: 44px;
}

.container {
  box-sizing: border-box;
  margin: auto;
  max-width: 70%;
  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: #febd44;
  text-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: 28px "Times New Roman", Sans-serif;
}

sup {
  font-size: 15px;
  margin-left: 3px;
}

.price {
  position: relative;
  top: .9em;
  float: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

我试图弄乱填充和边距，但对我而言并没有任何改变。

我只想在保持虚线上方的同时更改价格大小

1 个答案:

答案 0 :(得分：0)

只需显式设置.li的最高值，以及.price em的大小（即价格的字体大小）即可。

//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: #e6e6e6;
  font-family: "Open Sans", Sans Serif;
  font-weight: 300;
  color: #febd44;
  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: 44px;
}

.container {
  box-sizing: border-box;
  margin: auto;
  max-width: 70%;
  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: #febd44;
  text-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;
  /* set the height of the li explicitly */
  height: 20px;
}

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

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

sup {
  font-size: 15px;
  margin-left: 3px;
}

.price {
  position: relative;
  float: right;
}


/* set the size of .price em */

.price em {
  font-size: 50px;
}


/* set the size of .price sup */

.price sup {
  font-size: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

但是我认为使用 flexbox 会更好，然后您可以将font-size设置为所需的任何值，而不必担心显示不正确：

body {
  background: pink;
}

.menu-list {
  list-style-type: disc;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 0;
}

.menu-list .li {
  margin: auto;
  background: white;
  display: flex;
  width: 80%;
  /* 'justify-content: space-between;' does the trick of
  separating the two items in the li */
  justify-content: space-between;
  border-bottom: 1px dotted red;
}

.menu-list .li .title,
.menu-list .li .price {
  display: flex;
}

.menu-list .li .title {
  font-size: 18px;
  align-self: flex-end;
}

.menu-list .li .price {
  font-size: 30px;
}
<ul class="menu-list">
  <li class="li"><span class="title">Food 1</span><span class="price">3<sup>50</sup></span></li>
  <li class="li"><span class="title">Food 2</span><span class="price">5<sup>50</sup></span></li>
  <li class="li"><span class="title">Food 3</span><span class="price">4<sup>00</sup></span></li>
</ul>

相关问题
最新问题