我正在尝试将黑框下方的红色边框移开。我应该如何移动红色边框?
这是针对CSS项目的。过去,我尝试将div转换为html,但结果保持不变。
#box{
width:150px;
padding:5px;
height:30px;
background-color:#323232;
float:right;
color:white;
text-align:center;
text-transform:uppercase;
}
#border{
border-bottom:2px solid red;
position: relative;
}
<div id="box">Text Goes Inside</div>
<div id="border"></div>
这是它的外观
答案 0 :(得分:1)
简单:使用margin-left: auto;
因此您可以将CSS更改为:
#box {
width:150px;
padding:5px;
height:30px;
background-color:#323232;
margin-left: auto;
color:white;
text-align:center;
text-transform:uppercase;
}
#border {
border-bottom:2px solid red;
position: relative;
}
答案 1 :(得分:0)
Float: right;
是使边框超出框上方的原因。如果您将clear: both;
添加到边框,则应显示您的喜好。
#box{
width:150px;
padding:5px;
height:30px;
background-color:#323232;
float:right;
color:white;
text-align:center;
text-transform:uppercase;
}
#border{
border-bottom:2px solid red;
position: relative;
clear: both;
}
<div id="box">Text Goes Inside</div>
<div id="border"></div>
答案 2 :(得分:-1)
html:
<div class="outer">
<div class="inner" id="box">Text Goes Inside</div>
<div class="inner" id="border"></div>
</div>
CSS:
#box{
width:150px;
padding:5px;
height:30px;
background-color:#323232;
color:white;
text-align:center;
text-transform:uppercase;
position: relative;
}
#border{
border-bottom:2px solid red;
position: relative;
}
.outer {
width: 100%;
}