定價表中的CSS添加列
[英]CSS Adding column in pricing table
問題描述
嗨，下面的代碼是從W3schools.com上獲取的 ，用於博客作者的博客。
<style> /*----------Price Box--------------*/ .pricecolumns { float: left; width: 33.3%; padding: 8px; } .price { list-style-type: none; border: 1px solid #eee; margin: 0; padding: 0; -webkit-transition: 0.3s; transition: 0.3s; } .price:hover { box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2) } .price .priceheader { background-color: #2CB8DA; color: white; font-size: 25px; } .price li { border-bottom: 1px solid #eee; padding: 20px; text-align: center; } .price .grey { background-color: #FFFFEF; font-size: 20px; } .pricebutton { background-color: #FBA614; border: none; color: white; padding: 10px 25px; text-align: center; text-decoration: none; font-size: 18px; } </style>
<body> <div class="pricecolumns"> <ul class="price"> <li class="priceheader">Rent</li> <li class="grey">$ 18.99 / Month</li> <li>Test The Product on Live Market</li> <li class="grey"><a href="#" class="pricebutton">Rent</a></li> </ul> </div> <div class="pricecolumns"> <ul class="price"> <li class="priceheader" style="background-color:#4CAF50">Buy</li> <li class="grey">$ 27.99 Life Time</li> <li>Buy Forever License</li> <li class="grey"><a href="#" class="pricebutton">Buy Now!</a></li> </ul> </div> </body>
但是問題是。 塊顯示一個接一個。 不像網站上顯示的2列那樣。
由於該代碼，我無法添加以下代碼（如本教程所建議），這使博客作者下拉菜單看起來很奇怪。
* { box-sizing: border-box; }
2 個解決方案
解決方案1
3 已采納 2017-04-28 09:37:50
您的CSS有問題。 您在錯別字css中使用了錯誤的css選擇器。
更改此-
.pricecolumns {
float: left;
width: 33.3%;
padding: 8px;
}
為此-
.price_columns {
float: left;
width: 33.3%;
padding: 8px;
}
以下是2個列和3列的方法-
2列
/*----------Price Box--------------*/ .price_columns { float: left; width: 33.3%; padding: 8px; } .price { list-style-type: none; border: 1px solid #eee; margin: 0; padding: 0; -webkit-transition: 0.3s; transition: 0.3s; } .price:hover { box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2) } .price .priceheader { background-color: #2CB8DA; color: white; font-size: 25px; } .price li { border-bottom: 1px solid #eee; padding: 20px; text-align: center; } .price .grey { background-color: #FFFFEF; font-size: 20px; } .pricebutton { background-color: #FBA614; border: none; color: white; padding: 10px 25px; text-align: center; text-decoration: none; font-size: 18px; } @media only screen and (max-width: 520px) { .pricecolumns { width: 100%; } }
<body> <div class="price_columns"> <ul class="price"> <li class="priceheader">Rent</li> <li class="grey">$ 18.99 / Month</li> <li>Test The Product on Live Market</li> <li class="grey"><a href="#" class="pricebutton">Rent</a></li> </ul> </div> <div class="price_columns"> <ul class="price"> <li class="priceheader" style="background-color:#4CAF50">Buy</li> <li class="grey">$ 27.99 Life Time</li> <li>Buy Forever License</li> <li class="grey"><a href="#" class="pricebutton">Buy Now!</a></li> </ul> </div> </body>
3列
/*----------Price Box--------------*/ * { box-sizing: border-box; -moz-box-sizing: border-box; -moz-box-sizing: border-box; } .price_columns { float: left; width: 33.3%; padding: 8px; } .price { list-style-type: none; border: 1px solid #eee; margin: 0; padding: 0; -webkit-transition: 0.3s; transition: 0.3s; } .price:hover { box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2) } .price .priceheader { background-color: #2CB8DA; color: white; font-size: 25px; } .price li { border-bottom: 1px solid #eee; padding: 20px; text-align: center; } .price .grey { background-color: #FFFFEF; font-size: 20px; } .pricebutton { background-color: #FBA614; border: none; color: white; padding: 10px 25px; text-align: center; text-decoration: none; font-size: 18px; } @media only screen and (max-width: 520px) { .pricecolumns { width: 100%; } }
<body> <div class="price_columns"> <ul class="price"> <li class="priceheader">Rent</li> <li class="grey">$ 18.99 / Month</li> <li>Test The Product on Live Market</li> <li class="grey"><a href="#" class="pricebutton">Rent</a></li> </ul> </div> <div class="price_columns"> <ul class="price"> <li class="priceheader" style="background-color:#4CAF50">Buy</li> <li class="grey">$ 27.99 Life Time</li> <li>Buy Forever License</li> <li class="grey"><a href="#" class="pricebutton">Buy Now!</a></li> </ul> </div> <div class="price_columns"> <ul class="price"> <li class="priceheader" style="background-color:red">Buy</li> <li class="grey">$ 27.99 Life Time</li> <li>Buy Forever License</li> <li class="grey"><a href="#" class="pricebutton">Buy Now!</a></li> </ul> </div> </body>
僅針對此特定部分進行大小調整：
/*----------Price Box--------------*/ .price_columns { float: left; width: 33.3%; padding: 8px; box-sizing: border-box; -moz-box-sizing: border-box; -moz-box-sizing: border-box; } .price { list-style-type: none; border: 1px solid #eee; margin: 0; padding: 0; -webkit-transition: 0.3s; transition: 0.3s; } .price:hover { box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2) } .price .priceheader { background-color: #2CB8DA; color: white; font-size: 25px; } .price li { border-bottom: 1px solid #eee; padding: 20px; text-align: center; } .price .grey { background-color: #FFFFEF; font-size: 20px; } .pricebutton { background-color: #FBA614; border: none; color: white; padding: 10px 25px; text-align: center; text-decoration: none; font-size: 18px; } @media only screen and (max-width: 520px) { .pricecolumns { width: 100%; } }
<body> <div class="price_columns"> <ul class="price"> <li class="priceheader">Rent</li> <li class="grey">$ 18.99 / Month</li> <li>Test The Product on Live Market</li> <li class="grey"><a href="#" class="pricebutton">Rent</a></li> </ul> </div> <div class="price_columns"> <ul class="price"> <li class="priceheader" style="background-color:#4CAF50">Buy</li> <li class="grey">$ 27.99 Life Time</li> <li>Buy Forever License</li> <li class="grey"><a href="#" class="pricebutton">Buy Now!</a></li> </ul> </div> <div class="price_columns"> <ul class="price"> <li class="priceheader" style="background-color:red">Buy</li> <li class="grey">$ 27.99 Life Time</li> <li>Buy Forever License</li> <li class="grey"><a href="#" class="pricebutton">Buy Now!</a></li> </ul> </div> </body>
解決方案2
2 2017-04-28 09:35:02
<div class="price_columns">是您的錯誤，因為在CSS中您沒有帶下划線的類，而您有pricecolumns
在價格表中添加條紋按鈕
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.