使用 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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 09:07:27  来源:igfitidea点击:

Use HTML Div to add border only on top and bottom?

html

提问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-leftborder-rightborder-topborder-bottom性质给予不同的边框样式,您的容器的两侧。

In your case, you want to apply your style to border-topand border-bottom.

在您的情况下,您希望将您的样式应用于border-topborder-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>