使用 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-styleis 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-rightborder-left... separately.
您可以border-rightborder-left单独指定...。
回答by James Allardice
You can use the border-left, border-right, border-topand border-bottomproperties 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-topand 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>
