CSS股利框宽度

Question

目前我有这样的：

我这个问题是需要.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; 
} 

Answer 1

在.selectedCenter .alertMessage选择删除width: 100%;声明。
Here's a version of your code that works like you want it to.

---

说明：

既然你设置它的宽度是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 */ 
}