Html 直到div结尾的底部边框线，即使文本没有继续

我正在为我的网站制作一个小的“新闻”标签，但是我希望在div结束之前有一个边界线，即使这意味着它超过了我所输入的文本，这将发生在每一条新闻线上，目前我已经尝试过了

.news {
width: 50%;
height: 40%;
background-color: #FFF;
float: right;
margin-top: 50px;
margin-right: 60px;
}

.news a {
text-decoration: none;
color: #000;
font-size: 21px;
}

.news p a {
content: "";
padding-bottom: 1%;
border-bottom: 2px solid #000;
}

.news image {
/* Nothing */
}

我定义的边界底部应该一直到div的末尾，但是我还没有找到方法来完成这项工作，所以我想知道这是否可行

*{
保证金：0；
填充：0；
最小宽度：1px；
最小高度：1px；
}
html，
身体{
宽度：100%；
身高：115%；
溢出x：隐藏；
背景图片：url（'../img/bg.jpg'）；
}
标题{
利润率最高：2%；
背景色：#FF0000；
左缘：12.1%；
宽度：75%；
高度：180像素；
}
标题p{
字体大小：64px；
左缘：40%；
垫面：4.5%；
}
#导航{
左缘：12.1%；
宽度：75%；
高度：50px；
背景色：#FF0000；
边框底部：1px实心#FFFFFF；
}
#海军ulli a{
显示：内联块；
文本对齐：居中；
填充：11px 14px；
文字装饰：无；
字体大小：24px；
}
#内容{
左缘：12.1%；
宽度：75%；
身高：73.9%；
背景色：#FF0000；
}
.新闻{
宽度：50%；
身高：40%；
背景色：#FFF；
浮动：对；
边缘顶部：50px；
右边距：60px；
}
.新闻{
文字装饰：无；
颜色：#000；
字号：21px；
}
.新闻报{
内容：“；
垫底：1%；
边框底部：2倍实心#000；
}
.新闻形象{
/*我还不知道在这里该怎么办*/
}
#形式{
垫面：10%；
宽度：100%；
文本对齐：居中；
显示：块；
}
#表格标签{
字体大小：25px；
边界：无；
}
#表单输入{
宽度：30%；
高度：30px；
利润底部：2%；
}
#表单输入[类型=文本]，
输入[类型=密码]{
边框：1px实心#FFFFFF；
边界半径：2%；
}
#表单输入[类型=文本]，
输入[类型=密码]{
大纲：无；
}
#表单输入[类型=提交]{
背景色#006099；
边框：1px实心#006099；
}
#表单输入[类型=提交]：焦点{
背景色：#005099；
大纲：无；
}
#表格标签p{
颜色：#11FF00；
}
.可下载{
文本对齐：居中；
填充顶部：80px；
}
.downloadable a{}.downloadable a img{
宽度：40%；
}
.可下载的图像：悬停{
-webkit过滤器：模糊（1px）；
-moz滤波器：模糊（1px）；
-o-滤波器：模糊（1px）；
-ms过滤器：模糊（1px）；
滤镜：模糊（1px）；
}
页脚{
文本对齐：居中；
背景色：#FF9900；
宽度：75%；
左缘：12.1%；
}
#导航#对{
浮动：对；
}
#导航ul{
列表样式类型：无；
保证金：0；
填充：0；
宽度：100%；
边框顶部：1px实心#FFFFFF；
}
#李国荣{
浮动：左；
}
#导航：悬停{
过渡：0.5s；
背景色：#FFFF0F；
}
#登录{
显示：无；
浮动：对；
利润率最高：2%；
保证金权利：5%；
宽度：25%；
身高：20%；
边框：1px实心#4444；
背景色：#FFFFFF；
}
#登录表单{
左边距：15%；
利润率最高：8%；
}

网站
失落的故事















Lucas Ouwens制作的网站

将您的

.news p a

部分改为：

.news p a {
   content: "";
   padding-bottom: 1%;
   border-bottom: 2px solid #000;
   display: block;
   width: 100%;
}

---

像

这样的内联元素的宽度与其内容相同。通过将

更改为

显示：块，然后您可以根据自己的喜好更改其宽度。在这种情况下，我相信您希望
宽度：100%
边框底部

不会一直延伸到末尾，因为应用它的

元素具有
内联
显示（默认
显示
）并采用内容的宽度

将
display:block
添加到
.news p a
，它将扩展到整个宽度

干杯

下面的片段：


*{
保证金：0；
填充：0；
最小宽度：1px；
最小高度：1px；
}
html，
身体{
宽度：100%；
身高：115%；
溢出x：隐藏；
背景图片：url（'../img/bg.jpg'）；
}
标题{
利润率最高：2%；
背景色：#FF0000；
左缘：12.1%；
宽度：75%；
高度：180像素；
}
标题p{
字体大小：64px；
左缘：40%；
垫面：4.5%；
}
#导航{
左缘：12.1%；
宽度：75%；
高度：50px；
背景色：#FF0000；
边框底部：1px实心#FFFFFF；
}
#海军ulli a{
显示：内联块；
文本对齐：居中；
填充：11px 14px；
文字装饰：无；
字体大小：24px；
}
#内容{
左缘：12.1%；
宽度：75%；
身高：73.9%；
背景色：#FF0000；
}
.新闻{
宽度：50%；
身高：40%；
背景色：#FFF；
浮动：对；
边缘顶部：50px；
右边距：60px；
}
.新闻{
文字装饰：无；
颜色：#000；
字号：21px；
}
.新闻报{
内容：“；
垫底：1%；
边框底部：2倍实心#000；
显示：块；
}
.新闻形象{
/*我还不知道在这里该怎么办*/
}
#形式{
垫面：10%；
宽度：100%；
文本对齐：居中；
显示：块；
}
#表格标签{
字体大小：25px；
边界：无；
}
#表单输入{
宽度：30%；
高度：30px；
利润底部：2%；
}
#表单输入[类型=文本]，
输入[类型=密码]{
边框：1px实心#FFFFFF；
边界半径：2%；
}
#表单输入[类型=文本]，
输入[类型=密码]{
大纲：无；
}
#表单输入[类型=提交]{
背景色#006099；
边框：1px实心#006099；
}
#表单输入[类型=提交]：焦点{
背景色：#005099；
大纲：无；
}
#表格标签p{
颜色：#11FF00；
}
.可下载{
文本对齐：居中；
填充顶部：80px；
}
.downloadable a{}.downloadable a img{
宽度：40%；
}
.可下载的图像：悬停{
-webkit过滤器：模糊（1px）；
-moz滤波器：模糊（1px）；
-o-滤波器：模糊（1px）；
-ms过滤器：模糊（1px）；
滤镜：模糊（1px）；
}
页脚{
文本对齐：居中；
背景色：#FF9900；
宽度：75%；
左缘：12.1%；
}
#导航#对{
<hr style="border-top: 2px solid; background-color: #ff0000; color:#ff0000">