时间戳

首页 > 解决方案 > 在定价表下添加价目表

html - 在定价表下添加价目表

问题描述

我目前正在做一个学校作业，我需要做一个价格网站。我为公司的套餐价格添加了一个定价表，但我想在定价表下添加一个价目表以显示其余价格。我试过了，但是当我使用更宽的屏幕时它看起来很奇怪

抱歉，大部分输出都是挪威语，但我住在挪威。

/* Create three columns of equal width */
.columns {
  float: left;
  width: 33.3%;
  padding: 8px;
}

/* Style the list */
.price {
  list-style-type: none;
  border: 1px solid #eee;
  margin: 0;
  padding: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

/* Add shadows on hover */
.price:hover {
  box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2);
}

/* Pricing header */
.price .header {
  background-color: #111;
  color: white;
  font-size: 25px;
}

/* List items */
.price li {
  border-bottom: 1px solid #eee;
  padding: 20px;
  text-align: center;
}

/* Grey list item */
.price .grey {
  background-color: #eee;
  font-size: 20px;
}

/* The "Sign Up" button */
.button {
  background-color: #999;
  border: none;
  color: white;
  padding: 10px 25px;
  text-align: center;
  text-decoration: none;
  font-size: 18px;
}

/* Change the width of the three columns to 100%
(to stack horizontally on small screens) */
@media only screen and (max-width: 600px) {
  .columns {
    width: 100%;
  }
}

ul.leaders {
  padding:        0;
}
ul.leaders li {
  display:        table;
}
ul.leaders li span {
  display:        table-cell;
}
ul.leaders li span:first-child { /* TITLE */
  position:       relative;
  overflow:       hidden;       /* Don't go underneath the price */
}
ul.leaders li span:first-child:after { /* DASHES */
  content:        "";
  position:       absolute;
  bottom:         0.5em;        /* Set as you want */       
  margin-left:    0.5em;        /* Keep same for the next span's left padding */
  width:          100%;
  border-bottom:  1px dashed #000;
}
ul.leaders li span + span {     /* PRICE */
  text-align:     right;
  width:          1%;           /* Trick it */
  vertical-align: bottom;       /* Keep Price text bottom-aligned */
  padding-left:   0.5em;
  /* white-space: nowrap;       /* Uncomment if needed */
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
    <div class="container">
      <div class="masthead">
        <h3 class="text-muted"></h3>
        <nav>
          <ul class="nav nav-justified">
            <li><a href="index.html">Hjem</a></li>
            <li><a href="nyheter.html">Nyheter</a></li>
            <li class="active"><a href="priser.html">Priser</a></li>
            <li><a href="about.html">Om oss</a></li>
            <li><a href="kontakt.html">Kontakt oss</a></li>
          </ul>
        </nav>
      </div>
    </div>
      <h2 style="text-align:center"> Våre priser</h2>

<div class="columns">
  <ul class="price">
    <li class="header">Pakke <br> Idèutvikling</li>
    <li class="grey">kr 1,000.00</li>
    <li>Spar 17%</li>
    <li>6 timer</li>
    <li>Døgnåpen kundeservice</li>
    <li class="grey"><a href="#" class="button">Kjøp nå</a></li>
  </ul>
</div>

<div class="columns">
  <ul class="price">
    <li class="header">Pakke <br> Idèutvikling + veiledning</li>
    <li class="grey">kr 1,800.00</li>
    <li>Spar 25%</li>
    <li>6 timer idèutvikling</li>
    <li>4 timer veiledning</li>
    <li>Døgnåpen kundeservice</li>
    <li class="grey"><a href="#" class="button">Kjøp nå</a></li>
  </ul>
</div>

<div class="columns">
  <ul class="price">
    <li class="header">Gründerkurs</li>
    <li class="grey">kr 3,000.00</li>
    <li>Kurs for deg som vil bli gründer</li>
    <li>2 dager</li>
    <li>Sertifiserte kursledere</li>
    <li class="grey"><a href="#" class="button">Les mer</a></li>
  </ul>
</div>

<ul class=leaders>
  <li>
    <span>Salmon Ravioli</span>
    <span>7.95</span>
  </li>
  <li>
    <span>Pan seared Ahi with avocado, soy, ginger and lime</span>
    <span>8.95</span>
  </li>
  <li>
    <span>Almond Prawn Cocktail</span>
    <span>7.95</span>
  </li>
  <li>
    <span>Bruschetta</span>
    <span>45.25</span>
  </li>
  <li>
    <span>Margherita Pizza</span>
    <span>108.95</span>
  </li>
</ul>
</body>
</html>

标签： htmlcss

解决方案

所以我编辑了你的最后一个ul.leaders，使其占据整个宽度并且float:left：

ul.leaders {
  padding:        0;
  width: 100%;
  float: left;
}

我添加box-sizing: border-box;了columns以使其正确适合正确的宽度。

演示

/* Create three columns of equal width */
.columns {
  float: left;
  width: 33.3%;
  padding: 8px;
  box-sizing: border-box;
}

/* Style the list */
.price {
  list-style-type: none;
  border: 1px solid #eee;
  margin: 0;
  padding: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

/* Add shadows on hover */
.price:hover {
  box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2);
}

/* Pricing header */
.price .header {
  background-color: #111;
  color: white;
  font-size: 25px;
}

/* List items */
.price li {
  border-bottom: 1px solid #eee;
  padding: 20px;
  text-align: center;
}

/* Grey list item */
.price .grey {
  background-color: #eee;
  font-size: 20px;
}

/* The "Sign Up" button */
.button {
  background-color: #999;
  border: none;
  color: white;
  padding: 10px 25px;
  text-align: center;
  text-decoration: none;
  font-size: 18px;
}

/* Change the width of the three columns to 100%
(to stack horizontally on small screens) */
@media only screen and (max-width: 600px) {
  .columns {
    width: 100%;
  }
}

ul.leaders {
  padding:        0;
  width: 100%;
  float: left;
}
ul.leaders li {
  display:        table;
}
ul.leaders li span {
  display:        table-cell;
}
ul.leaders li span:first-child { /* TITLE */
  position:       relative;
  overflow:       hidden;       /* Don't go underneath the price */
}
ul.leaders li span:first-child:after { /* DASHES */
  content:        "";
  position:       absolute;
  bottom:         0.5em;        /* Set as you want */       
  margin-left:    0.5em;        /* Keep same for the next span's left padding */
  width:          100%;
  border-bottom:  1px dashed #000;
}
ul.leaders li span + span {     /* PRICE */
  text-align:     right;
  width:          1%;           /* Trick it */
  vertical-align: bottom;       /* Keep Price text bottom-aligned */
  padding-left:   0.5em;
  /* white-space: nowrap;       /* Uncomment if needed */
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="masthead">
      <h3 class="text-muted"></h3>
      <nav>
        <ul class="nav nav-justified">
          <li><a href="index.html">Hjem</a></li>
          <li><a href="nyheter.html">Nyheter</a></li>
          <li class="active"><a href="priser.html">Priser</a></li>
          <li><a href="about.html">Om oss</a></li>
          <li><a href="kontakt.html">Kontakt oss</a></li>
        </ul>
      </nav>
    </div>
  </div>
  <h2 style="text-align:center"> Våre priser</h2>

<div class="columns">
  <ul class="price">
    <li class="header">Pakke <br> Idèutvikling</li>
    <li class="grey">kr 1,000.00</li>
    <li>Spar 17%</li>
    <li>6 timer</li>
    <li>Døgnåpen kundeservice</li>
    <li class="grey"><a href="#" class="button">Kjøp nå</a></li>
  </ul>
</div>

<div class="columns">
  <ul class="price">
    <li class="header">Pakke <br> Idèutvikling + veiledning</li>
    <li class="grey">kr 1,800.00</li>
    <li>Spar 25%</li>
    <li>6 timer idèutvikling</li>
    <li>4 timer veiledning</li>
    <li>Døgnåpen kundeservice</li>
    <li class="grey"><a href="#" class="button">Kjøp nå</a></li>
  </ul>
</div>

<div class="columns">
  <ul class="price">
    <li class="header">Gründerkurs</li>
    <li class="grey">kr 3,000.00</li>
    <li>Kurs for deg som vil bli gründer</li>
    <li>2 dager</li>
    <li>Sertifiserte kursledere</li>
    <li class="grey"><a href="#" class="button">Les mer</a></li>
  </ul>
</div>

<ul class=leaders>
  <li>
    <span>Salmon Ravioli</span>
    <span>7.95</span>
  </li>
  <li>
    <span>Pan seared Ahi with avocado, soy, ginger and lime</span>
    <span>8.95</span>
  </li>
  <li>
    <span>Almond Prawn Cocktail</span>
    <span>7.95</span>
  </li>
  <li>
    <span>Bruschetta</span>
    <span>45.25</span>
  </li>
  <li>
    <span>Margherita Pizza</span>
    <span>108.95</span>
  </li>
</ul>
</body>
</html>

推荐阅读