#html #css
#HTML #css
Вопрос:
В настоящее время я выполняю школьное задание, и мне нужно создать сайт с ценами. Я добавил таблицу цен для пакетов компании, но я хотел бы добавить прайс-лист под таблицей цен, чтобы отобразить остальные цены. Я пытался, но это выглядит странно, когда я использую более широкий экран
Извините, что большая часть выходных данных на норвежском языке, но я живу в Норвегии.
/* 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> Ответ №1:
Итак, я отредактировал ваш последний 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>