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 に答える