0

目前我有这个：

在此处输入图像描述

我的问题是黑色边框.textMessage需要与.alertMessage宽度上方的框对齐。我已经尽一切努力让它对齐。

HTML：

<div class="scheduledCenter">
    <p class ="alertMessage"><span class="bold">Important:</span> Your Account is set to Pacific/Auckland Time.  The Time is now <span class="bold">9:30AM</span> on <span class="bold">29th May 2012</span></p> <span class="close"></span>
    <div class="userInformation">
        <span class="userImage"><img src="_assets/images/ava.png" width="46" height="45" alt="Ava"></span>
        <span class="bold">FROM:</span>
        <p class="userDetails">123456789XXX</p>
    </div>
    <div class="textMessage">
        <div class="innerBar">
            <div class="innerTo">
                <form action="#" method="get">
                    <label for="recipients">TO: </label><input type="search" name="recipients" id="recipients" placeholder="Recipients Names">
                </form>
            </div>
            <div class="innerReplies">
                <form action="#" method="get">
                    <label for="replies">Replies: </label><p class="forward">Forward to | 0212133263</p><input type="search" name="replies" id="replies" placeholder="filename.png">
                </form>
            </div>
        </div>
    </div>
</div>

CSS：

.scheduledCenter{
    width:100%;
    min-height:100%;
    padding:10px 0px 0 0px;
}
.scheduledCenter .alertMessage{
    width:100%;
    height:15px;
    color:#3385B2;
    background: #D1DEE8 url('../images/close.png') no-repeat 99% 8px;
    border:3px solid #8099B4;
    border-radius:3px;
    padding:5px;
}
.scheduledCenter .alertMessage .bold{
    font-weight:bold;
}
.scheduledCenter .userInformation{
    float:left;
    width:50px;
    height:100%;
    min-height:100%;
    margin:10px 15px 0 0;
}
.scheduledCenter .userInformation .bold{
    font-weight:bold;
}
.scheduledCenter .userInformation .userDetails{
    padding:10px 0 0 0;
}
.scheduledCenter .userInformation .userImage img{
    margin:0 0 10px 0;
}
.textMessage {
    margin:0 0 0 90px;
    position: relative;
    background: #FFF;
    border: 5px solid #000;
}
.textMessage:after, textMessage:before {
    right: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.textMessage:after {
    border-right-color: #FFF;
    border-width: 10px;
    top: 50%;
    margin-top: -10px;
}
.textMessage:before {
    border-right-color: #000;
    border-width: 17px;
    top: 50%;
    margin-top: -17px;
}
.innerBar{
    width:100%;
    height:60px;
    background-color:#F5F5F5;
}
.innerBar .innerTo{
    width:200px;
    padding:5px 0 0 15px;
    display:block;
    float:left;
}
.innerBar .innerTo label{
    margin:0 15px 0 0;
    font-size:14px;
    font-weight:bold;
    color:#666666;
}
.innerBar .innerTo input[type=search] {
    color: red;
}
.innerBar .innerReplies{
    width:150px;
    padding:5px 0 0 15px;
    background:purple;
    display:block;
    float:right;
}
4

1 回答 1

1

删除选择器width: 100%;中的声明.selectedCenter .alertMessage。
这是您想要的代码版本。

解释：

由于您将其宽度设置为 100% 的元素已经是块级元素，它会自动占据其容器的整个宽度，但通过将其宽度设置为 100%，它不会占用执行此操作时将其边距/填充/边框考虑在内，因此，将这些属性中的任何一个设置为 >1，额外的宽度将从其父级突出。

.scheduledCenter .alertMessage {
    background: url("../images/close.png") no-repeat scroll 99% 8px #D1DEE8;
    border: 3px solid #8099B4;
    border-radius: 3px 3px 3px 3px;
    color: #3385B2;
    height: 15px;
    padding: 5px;
    /* width: 100%; <-- This is what's causing the problem */
}
于 2012-06-01T03:26:03.193 回答