[英]Equal border-left and border-right height in CSS
How can I make border-left the same height as border-right? 如何使左边框与右边框的高度相同? In other words, how to change the order of the borders?
换句话说,如何更改边框的顺序? Border-left is taller than border-right.
左边框比右边框高。 Which results in a 1px "gap".
这导致1px的“间隙”。
.tab-header > ul > li
{
display: inline-block;
background-color: #ffffff;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #cecece;
border-right: 1px solid #cecece;
border-top: 1px solid #cecece;
padding: 8px;
font-size: 10px;
text-transform: uppercase;
}
What is happening, is that the css tries to make a nice diagonal colour change in the border. 发生的是,css试图在边框中进行漂亮的对角线颜色更改。 If you change all the
1px
to 10px
, you see the problem. 如果将所有
1px
更改为10px
,则会看到问题。 (Image, see: http://jsfiddle.net/DaTCy/1/ ) (图片,请参阅: http : //jsfiddle.net/DaTCy/1/ )
If you are using 1px widths of the borders, the bottom and the right border will always overlap in the bottom-right pixel. 如果您使用的边框宽度为1px,则底部边框和右侧边框将始终在右下角像素中重叠。
EDIT: As a solution, you can try giving the bottom border a width of 0px, and solving the height problem in the container you put the button in. 编辑:作为一种解决方案,您可以尝试将底部边框的宽度设置为0px,并在放入按钮的容器中解决高度问题。
The simplest solution is to explicitly use: 最简单的解决方案是显式使用:
border-bottom-width: 0;
对不同的 [嵌套]元素使用border-left/-top/-right
和border-bottom
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.