jquery - Alignment of button within a div - Currently dropped down -
I was thinking that someone could help me. I am trying to align the close button vertically within the alert DEL:
Whatever I try, the button always sits very low, although in principle it should be able to fit just fine in the div
This is my CSS:
. Btn {letter-spacing: 1px; Padding: 10px; Border-radius: 3px; Display: Inline-block; Margin-top: 5px; Margin-down: 5px; } .btn_pri {background-color: # 47 9 ccf; Color: #fff; } .btn_pri: hover {background-color: # 3A8BC0} .btn_sec {background-color: #fcfcfc; Color: # 47 9 ccf; Border: 1 px solid # E3E3A3; } .btn_sec: hover {background-color: #EDEDED} .btn_close {background color: transparent; Cursor: indicator; Font-size: 16px; font-weight: bold; float right; Border: 0; } Do I need to clean float, or something like that?
Simply remove the margin and padding from the button:
.btn { / * padding: 10px; Margin-top: 5px; Margin-down: 5px; If the button requires padding, then use the negative margin to move it. Just add enough negative margins so that he can adjust padding on the button and padding on his parents. .btn {padding: 10px; Margin: -10px-10px-10px; / * Padding: 10px; Margin-top: 5px; Margin-down: 5px; After saying all this, I will use relative position because the button is placed under the div which means float: correct will not work as expected if there are two or more rows in the alert. .alert {padding: 15px; } .has-btn {status: relative; / * Create place for button * / padding-right: 40px; } .btn {/ * Reset Button Properties * / Margin: 0; Border: 0; Padding: 4px 8px; / * Set height * / font-size: 16px; Line-height: 16px; / * Set position * / cursor: indicator; Status: Completed; Correct: 11px; Top: 11px; / * For testing * / background color: #ccc; }
Comments
Post a Comment