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

Question

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

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

这是它的外观

Answer 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。

Answer 2

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>

Answer 3

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