使用 HTML Div 仅在顶部和底部添加边框?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/6361074/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use HTML Div to add border only on top and bottom?
提问by David.Chu.ca
I use HTML DIV tag to format my header with border like this:
我使用 HTML DIV 标记来格式化带有边框的标题,如下所示:
<h3 style="background-color:red; padding:2% 0 2% 0; border:5px solid green">
This is a header
</h3>
However, I would like to have the border appears only on top and bottom, but not on left and right. I would like border in the same way as padding for top left bottom and right, but border does not have this feature(or I don't know?). Is there any way in CSS style to do that?
但是,我希望边框仅出现在顶部和底部,而不出现在左侧和右侧。我希望以与左上角和右下角的填充相同的方式边框,但边框没有此功能(或者我不知道?)。CSS样式有什么方法可以做到这一点吗?
回答by Chris
Just a case of:
只是一个案例:
<h3 style="background-color:red; padding:2% 0 2% 0; border-top:5px solid green; border-bottom: 5px solid green;">
This is a header
</h3>
回答by user1823021
For future reference, the following is a an alternative method that avoids having to define border properties (colour, width) more than once and allows declarations similar to those used for margin and padding (as requested).
为了将来参考,以下是一种替代方法,可避免多次定义边框属性(颜色、宽度)并允许类似于用于边距和填充(根据要求)的声明。
border: 5px green;
border-style: solid none;
As with margin or padding, border-style
is defined in order of top, right, bottom, left. The above case applies a solid border to top and bottom of an element and no border to the left or right of the element.
与边距或填充一样,border-style
按顶部、右侧、底部、左侧的顺序定义。上述情况在元素的顶部和底部应用实心边框,元素的左侧或右侧没有边框。
Using this method avoids creating redundancies in the declaration.
使用此方法可避免在声明中创建冗余。
回答by Brad
border-top: 5px solid green; border-bottom: 5px solid green;
border-top: 5px solid green; border-bottom: 5px solid green;
You should put this style directly on the <h3>
rather than wrapping a div around it.
您应该将此样式直接放在 上,<h3>
而不是将 div 包裹在它周围。
回答by Alan
You can use the following in your css or style tag ....
您可以在 css 或 style 标签中使用以下内容....
#div-id {
width: 100px;
height: 50px;
border-style: solid;
border-width: 1px 0;
border-color: #000;
}
Using the border-width selector you can define the various border thickness. The values are inserted in the order top, right, bottom, left and the shorthand version is top/bottom and right/left which is what I've used.
使用边框宽度选择器可以定义各种边框厚度。这些值按顶部、右侧、底部、左侧的顺序插入,速记版本是顶部/底部和右侧/左侧,这是我使用的。
For example, you can set a div with a 4px top border, a 3px right border, a 2px bottom border and a 1px left border with the following .... border-width: 4px 3px 2px 1px;
例如,您可以设置一个具有 4px 上边框、3px 右边框、2px 下边框和 1px 左边框的 div,使用以下内容....border-width: 4px 3px 2px 1px;
You can set both top and bottom borders to 3px and the left and right borders to 1 px with the following .... border-width: 3px 1px;
您可以使用以下内容将顶部和底部边框设置为 3px,将左右边框设置为 1 px .... border-width: 3px 1px;
回答by Pekka
You can specify border-right
border-left
... separately.
您可以border-right
border-left
单独指定...。
回答by James Allardice
You can use the border-left
, border-right
, border-top
and border-bottom
properties to give different border styles to each side of your container.
您可以使用border-left
,border-right
,border-top
和border-bottom
性质给予不同的边框样式,您的容器的两侧。
In your case, you want to apply your style to border-top
and border-bottom
.
在您的情况下,您希望将您的样式应用于border-top
和border-bottom
。
回答by Tim S. Van Haren
You can specify border like so:
您可以像这样指定边框:
<h3 style="background-color:red; padding:2% 0 2% 0;
border-top:5px solid green; border-bottom:5px solid green">
This is a header
</h3>