Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/76.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 垂直分隔符_Html_Css - Fatal编程技术网

Html 垂直分隔符

Html 垂直分隔符,html,css,Html,Css,我正在创建一个垂直分隔器,效果很好。但是CSS很麻烦 CSS是: .headerDivider1 { border-left:1px solid #38546d;height:80px;position:absolute;right:250px;top:10px; } .headerDivider2 { border-left:1px solid #16222c;height:80px;position:absolute;right:249px;top:10px; } HTML是: <

我正在创建一个垂直分隔器,效果很好。但是CSS很麻烦

CSS是:

.headerDivider1 {
border-left:1px solid #38546d;height:80px;position:absolute;right:250px;top:10px;
}

.headerDivider2 {
border-left:1px solid #16222c;height:80px;position:absolute;right:249px;top:10px;
}
HTML是:

<div class="headerDivider1"></div><div class="headerDivider2"></div>

结果是:

如何整理HTML和CSS?

.headerDivider{
.headerDivider {
     border-left:1px solid #38546d; 
     border-right:1px solid #16222c; 
     height:80px;
     position:absolute;
     right:249px;
     top:10px; 
}

<div class="headerDivider"></div>
左边框:1px实心#38546d; 右边框:1px实心#16222c; 高度:80px; 位置:绝对位置; 右:249px; 顶部:10px; }
这是高度!
<div class="headerdivider"></div>
.headerdivider {
    border-left: 1px solid #38546d;
    background: #16222c;
    width: 1px;
    height: 80px;
    position: absolute;
    right: 250px;
    top: 10px;
}