javascript - 如何在不破坏菜单的情况下更改价格大小？-6ren

javascript - 如何在不破坏菜单的情况下更改价格大小？

转载作者：行者123 更新时间：2023-11-27 23:58:37

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

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

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

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

最佳答案

只需显式设置.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>

关于javascript - 如何在不破坏菜单的情况下更改价格大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56117788/

文章推荐： css - 如何使用CSS使2个导航重叠

文章推荐： html - 将鼠标悬停在按钮上时如何反转按钮渐变

文章推荐： javascript - Apache Alias 指令破坏 CGI

文章推荐： html - CSS 正文作者样式不适用，无法覆盖用户代理样式表

javascript - 计算数量*价格=总计|总计/价格 = 数量
我需要一些帮助。我希望“总计”由“数量*价格=总计”计算(到目前为止没问题)。问题是我还需要通过“总/价格=数量”来计算“数量”，即如果一个字段发生更改，另一个字段也会自动更改。我做了一个非常简单
Javascript计算数量*价格
我试图将每件商品的数量和价格相乘来计算总数，但我的警报中出现错误。 $.each(data.items, function(index, d){ var calcultest = d.pric
Magento:价格，格式化但没有货币符号
我想获得格式化的价格但没有货币符号，我只想使用 magento 的标准功能! $product->getFinalPrice(); => 19.9900 Mage::helper('core')->f
mysql - 获取在不同表中形成的父类别总和(价格)
我正在尝试获取特定月份和年份中所有父类别的总价格。父类别是 parent_id == 0 的任何类别。我的查询如下所示: SELECT ROUND(SUM(od.total_price)) a
mySQL查询找到24小时内最低的 "active"价格
请帮我摆脱我的头痛..提前我为我的糟糕语言道歉，无论是英语还是mysql。希望有人能理解这个问题..:) 我有一个数据库，任何人都可以记录各个商店中各种产品的价格。以下查询是一个半理论示例，可能根本不
MySQL 价格/特价数据库设计
下面是我需要在数据库中设计的示例: 会有一个价格选项，如果有的话，会有一个特价选项，然后我想知道如果我希望其中一个选项是“免费”的，我该怎么做。另请参阅根据所在国家/地区会有不同的货币。这是我的想法
sql - 如何从描述中提取数字(价格)
商品价格格式 999,99 999 - 1 ..4 digits , - comma sign marks decimal point 99 - 2 digits after price Postg
Mysql 选择上个月的总和(价格)
我有这个表 stk +---------+--------------+ | Field | Type | +---------+--------------+ | id
Android 字符串格式 - 价格
是否有一个简单的格式化程序可以将我的字符串格式化为价格？所以我的字符串是:300000 我想用空格来“300 000” or 1000000 "1 000 000" 张国荣最佳答案这样做: St
excel - 独立于本地化的自定义编号(价格)格式
我想知道是否可以使用不依赖于 Excel 应用程序本地化(欧盟/美国)的 Excel 公式来自定义数字格式？例如，我的值为 1291660。然后使用公式=TEXT(A1;"# ##0,00") .
javascript - 价格 slider 事件发生时如何检查复选框是否被选中
这是我的代码，对于价格 slider : $("#price-slider").ionRangeSlider({ min: 130, max: 575, onChange :
elasticsearch - Elasticsearch动态过滤依据(价格*货币转换率)
用户可以使用价格创建一个新实体。价格可以使用不同的货币(EUR，USD ...)，因此我们可以乘以(price * convert_rate)得到实际价格。我想做的是根据价格过滤记录，具体取决于前端
javascript - 价格 jquery 中的小数位自动格式
我正在尝试隐藏小数位在类型输入字段上，例如数字从0.00开始因此，输入字段中的第一个位置将为 0.00 我输入的1比它应该变成0.01 我输入的2比它应该变成0.12 比 0 所以它应该变成 1.
javascript - PHP生成html文本框计算amt=qty*价格
$res=mysql_query($qry); while($row= mysql_fetch_array($res)) { echo "".$row['Food_Name']." ".$row['P
.net - 信用卡网关？ - API、价格
我们正在为我们的新项目寻找信用卡网关。那里一片困惑，所有人都想把你切成碎片。每次我与他们交谈时，他们都有不同的费率，每次更新报价时，他们都会更改一些价格。我们正在使用 .net、C#、asp.net
jQuery 价格 slider 过滤器值
我已经创建了一个 jQuery 价格 slider ，但我不确定如何让过滤区域以实际价格范围开始？目前它有“$[object Object] - $[object Object]”，而我希望它有“$2
jQuery 价格 slider 过滤器
我已经创建了 jquery 价格 slider ，但我不确定如何过滤我的结果，以便在滑动时您只能看到具有该值范围内的产品。 HTML: Price range:
javascript - 输入价格后如何在表格中添加另一行并计算金额(数量*价格)？
我有一个页面，其中有一个表格，我们可以在其中选择一个产品，输入它的数量和价格，然后应在最后一列中计算金额，并应添加新行以输入更多产品，直到我们完成为止。
javascript - 在php中计算每月包(产品)价格
我创建了电子商务网站，即将提供午餐和晚餐服务。我在这里提出问题/问题是因为我知道这里有很多可以帮助我的传奇人物。我在网站上添加了套餐/计划部分。 1. Weekly 2. Monthly 以下是订
javascript - jQuery 价格 slider
我的网站需要一个简单的 jQuery 价格 slider 。从 0 英镑到 1000 英镑不等。假设浏览器将 slider 设置为 100 英镑(例如)，然后我需要一个立即购买按钮，该按钮将 sli

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何在不破坏菜单的情况下更改价格大小？