CSS：将边框设置为一半宽度 [英] CSS: Set border to half width

问题描述

请考虑以下内容：

 < div class =box> 
 ... 
< / div> 
 
 .box {
 width：500px; 
 border-bottom：1px solid #ccc; 
} 
  

它将设置框全宽的底部边框（500px）。
但是不是将边框底部设置为整个宽度，我想设置300px，在框底部的中间，我应该怎么做。

$ <$>

$ <$>

b $ b

 < div class =box> 
 ... 
< hr> 
< / box> 
 
 .box {
 width：500px; 
} 
 
 .box hr {
 width：300px; 
 border-bottom：1px solid #ccc; 
} 
  

http://jsfiddle.net/MuAKF/

Consider following:

<div class="box">
...
</div>

.box{
    width:500px;
    border-bottom: 1px solid #ccc;
}

It will set the bottom border of full width of the box (500px). But instead of setting the border bottom to whole width, I'd like to set 300px, in the middle of the box bottom, how should I do that..

解决方案

Can you throw an <hr> at the bottom of your box?

<div class="box">
    ...
    <hr>
</box>

.box{
    width:500px;
}

.box hr{
    width: 300px;
    border-bottom: 1px solid #ccc;
}

http://jsfiddle.net/MuAKF/

这篇关于CSS：将边框设置为一半宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！