您好我有以下css给我以下结果:
.pop-up .amount {
position: relative;
height: 100%;
width: 195px;
background-color: #e6c515;
background-size: 10px;
padding-left: 18px;
padding-right: 3.5px;
font-size: 29px;
line-height: 32px;
color: white;
float: left;
margin: 3px;
text-shadow: 1px 2px #A7A2A2;
}
.pop-up .amount p {
float: left;
text-shadow: 1px 2px #A7A2A2;
padding-right: 47px;
width: 31px;
line-height: 15px;
text-align: left;
color: white;
font-size: 19px;
vertical-align: middle;
border-right: 2px solid #ACACAC;
height: 100%;
margin-right: 4px;
}
我当前的html片段如下
<div class="amount">
<p>1 UNDI</p>RM0.50
</div>
以下是截图:
但我期待的结果是这样的:
1 UNDI
字似乎没有正确对齐中心,边框也没有完全越过框,我该如何解决这个问题呢?感谢
答案 0 :(得分:1)
以下是一个与上面发布的示例屏幕截图相匹配的工作示例:http://jsfiddle.net/6DnPX/
我稍微更改了HTML以将内容拆分为div。为了实现您所需的格式化,通常更容易放置额外的容器以进行更细粒度的控制。
<div class="amount">
<div class="left"><span>1</span> UNDI</div>
<div class="right">RM0.50</div>
</div>
因此,我改变了CSS以在内部和分隔符周围添加边框。您可能需要稍微调整尺寸,因为您似乎使用了不同的字体,但希望这可以让您更接近您想要的位置。
CSS:
.amount {
font-family: Helvetica, Arial, sans-serif;
position: relative;
height: 100%;
width: 235px;
background-color: #e6c515;
background-size: 10px;
font-size: 39px;
line-height: 32px;
color: white;
float: left;
margin: 3px;
text-shadow: 1px 2px #A7A2A2;
border: 5px solid #eee;
}
.amount .left {
float: left;
text-shadow: 1px 2px #A7A2A2;
padding: 10px 25px 10px 15px;
width: 31px;
line-height: 20px;
text-align: left;
color: white;
font-size: 19px;
vertical-align: middle;
border-right: 2px solid #ACACAC;
height: 100%;
margin-right: 5px;
text-align: center;
}
.amount .left span {
font-size: 30px;
}
.amount .right {
border: 2px solid #ACACAC;
padding: 15px;
}
答案 1 :(得分:1)
只需更改以下代码中的颜色值即可完成。我只是用黄色,红色和白色来说明。
HTML:
<body class="pop-up">
<div class="amount">
<p>1 <span>UNDI</span></p>
<span class="s">RM0.50</span></div>
</body>
CSS:
.amount{
background:yellow;
float:left;
border:5px solid #c0c0c0;
padding-right:40px;
1padding-top:20px;
line-height:60px;
font-size:30px;
padding-left:5px;
color:#fff
}
.amount p {
margin:0;
border-right:5px solid red;
float:left;
width:80px;
padding-left:10px;
line-height:40px;
font-size:18px;
height:60px;
}
.amount p span {
display:block;
margin-top:-8px;
line-height:8px;
}
.s{
text-align:center;
display:inline-block;
padding-left:15px;
}
答案 2 :(得分:0)
<div class="amount">
<p>1<br /> UNDI</p>RM0.50
</div>
并使用
.pop-up .amount p{text-align: center;}
而不是text-align: left;
答案 3 :(得分:0)
演示:http://jsfiddle.net/parslook/6DnPX/1/
html:
<div class="amount">
<div class="left"><span>1</span> UNDI</div>
<div class="right">RM0.50</div>
</div>
css:
.amount {
font-family:Helvetica, Arial, sans-serif;
position: relative;
height: 100%;
width: 235px;
background-color: #e6c515;
background-size: 10px;
font-size: 39px;
line-height: 32px;
color: white;
float: left;
margin: 3px;
text-shadow: 1px 2px #A7A2A2;
border:5px solid #eee;
}
.amount .left{
float: left;
text-shadow: 1px 2px #A7A2A2;
padding:10px 10px;
line-height: 23px;
color: white;
font-size: 19px;
vertical-align: middle;
border-right: 2px solid #ACACAC;
min-height: 100%;
margin:0 auto;
text-align:center;
}
.amount .left span {
display:block;
font-size:30px;
}
.amount .right {
border: 2px solid #ACACAC;
padding:20px 95px;
text-shadow: 1px 2px #A7A2A2;
line-height: 23px;
color: white;
font-size: 30px;
vertical-align: middle;
border-right: 2px solid #ACACAC;
min-height: 100%;
height:100%
margin:0 auto;
text-align:center;
}