有没有更好的方法让这些蓝线跨越文本框的宽度？答案

【问题标题】：Is there a better way to make these blue lines span the width of the text box?有没有更好的方法让这些蓝线跨越文本框的宽度？
【发布时间】：2013-08-30 00:24:14
【问题描述】：

在我的blog site我有这些水平的蓝线，我想要它们做的只是跨越文本框的宽度，而我这样做的方式似乎会导致其他问题。我可以让它工作的唯一方法是添加这些时髦的边距。有没有更简单的方法让它成为文本框的宽度？

 .date {    
padding: 10px;
margin-left: -42px;
margin-right: -40px;
padding-left: 40px;
display: block;
background: #0076a9;

更新：

@media only screen and (max-width:640px) {
#header, #pageWrapper, #footer {
    padding: 30px 20px;
    margin-bottom: 0px !important;
}  
h1.logo {
    text-align: center;
    padding-bottom: 10px
}
.slide img {
    opacity: 1
}
.sqs-active-slide img {
    opacity:1
}
 img {margin-bottom: 10px;}

.collection-type-gallery #slideshowWrapper .slide img {
    background-color: white !important;
    margin: 2px 0;
}

.hentry {
    background: #F8F9FC;
    padding: 40px;
    border-style: solid;
    border-color: #E2E7F5;
    border-width: 2px
}

【问题讨论】：

请包含您的标记。当然，“更好”是主观的，负边距是完全有效的。
我支持 Derek S。我相信这里的负边距很酷。
如果您不想要负边距，即使它们非常好..您将需要更改 html 中“日期部分”的位置..现在，它继承文本框的填充。
你说“我这样做的方式似乎引起了其他问题”.. 还有什么问题？
它是一个来自 squarespace 的股票网站，我添加了很多 CSS。它在移动设备中引起了link 的问题。

标签： css textbox block

【解决方案1】：

将以下 CSS 添加到您的媒体查询（或创建一个新的）。

@media only screen and (max-width: 640px) {

    .hentry {
        padding:20px;
    }

    .date{
        margin-left: -22px;
        margin-right: -20px;
        padding-left: 22px;
    }

    .collection-type-blog article header .entry-title {
        padding-left:0;
        padding-right:0;
    }

}

【讨论】：

除了现在我的日期文本没有与正文对齐
@Jeff Dowell 您还需要调整 .date 上的 padding-left，请参阅更新后的答案。
非常感谢 Derek 的帮助。