如何在黑匣子下方移动红色边框?

时间:2019-01-21 18:08:28

标签: css css3

我正在尝试将黑框下方的红色边框移开。我应该如何移动红色边框?

这是针对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>

这是它的外观

enter image description here

3 个答案:

答案 0 :(得分:1)

简单:使用margin-left: auto;

而不是使用float将框移到右侧

因此您可以将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;
}

Here's the JSFiddle

答案 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%;
}