버튼을 누르고 텍스트의 바로 뒤에 가운데에 붙이십시오.

-2

텍스트 바로 뒤에 버튼을 밀어 넣을 수있는 방법은 지금 서 있기 때문에 텍스트보다 먼저 붙어 있습니다.버튼을 누르고 텍스트의 바로 뒤에 가운데에 붙이십시오.

현재 결과 : enter image description here

원하는 결과 :

<!DOCTYPE html> 

<html> 

<head> 
    <meta charset="utf-8"> 

<style type="text/css"> 
/*-------------------------------------------------------------------------------------------------- 
    CUSTOM ALERT BOX 
--------------------------------------------------------------------------------------------------*/ 
#alertBox_container { 
    left: 50%; 
    padding: 10px; 
    top: 50%; 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    border: 1px solid #808080; 
    position: relative; 
    color: rgb(11,63,113); 
} 
#alertBox { 
    height: 100px; 
    width: 400px; 
    bottom: 50%; 
    right: 50%; 
    position: absolute; 
    font-family: Arial; 
    font-size: 9pt; 
} 
#alertBox_titlebar { 
    line-height:24px; 
    width: 100%; 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#cdcdcd"); 
    font-weight: bold; 
} 
.alertBox_Button { 
    color: #464646; 
    border: 1px solid; 
    border-color: #999 #666 #666 #999; 
    background-color:#ccc; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#E7E7E7'); 
} 
.alertBox_Button:hover { 
    background-color: #ddd;   
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd'); 
    color: #000000; 
} 

#alertBox_close { 
    line-height: 10px; 
    width: 18px; 

    font-size: 8pt; 
    font-weight: bold; 

    margin-top: 2px; 
    margin-right: 2px; 
    padding-left: 2px; 
    padding-top: 2px; 
    position:absolute; 
    top:0; 
    right:0; 
} 

#alertBox_text { 
    position: absolute; 
    width: 100%; 
    height: auto; 
    top: 50%; 
    text-align: center; 
} 

#alertBox_div_btn_OK { 
    position: absolute; 
    width: 100%; 
    height: auto; 
    text-align: center; 
} 
#alertBox_btn_OK { 
    height: 20px; 
    width: 50px; 
    font-size: 9pt; 
} 

</style> 

</head> 

<body> 


<!--   Start of custom alertbox    --> 
<div id="alertBox"> 
    <div id="alertBox_container"> 
     <div id="alertBox_titlebar"><span style="padding-left: 3px;">IMTS</span></div> 
     <div><input class="alertBox_Button" id="alertBox_close" type="button" value="X" onclick="alertBox_hide()"></div> 
     <div id="alertBox_text">Searching the database...</div> 
     <div id="alertBox_div_btn_OK"><input class="alertBox_Button" id="alertBox_btn_OK" type="button" value="OK" onclick="alertBox_hide()"></div> 
     </div> 
    </div> 
</div> 
<!--   End of custom alertbox    --> 
</body> 

</html>

출처

2013-09-24 John Smith

난 어떤 이유가 표시되지 않습니다 : 여기에

enter image description here 는 HTML/CSS 마크 업입니다 그것은 텍스트 후에 가야한다 상자 안의 요소를 절대적으로 배치합니다. 그 제거하십시오 : 당신은 다음 적절하게 공간을 margin을 사용할 수 있습니다

http://jsfiddle.net/qysTW/1

#alertBox_text { 
    width: 100%; 
    height: auto; 
    text-align: center; 
} 

#alertBox_div_btn_OK { 
    width: 100%; 
    height: auto; 
    text-align: center; 
}

. 큰 페이지에 다른 것이 없으면 너비와 높이조차 필요하지 않습니다.

출처

2013-09-24 19:13:11

버튼을 누르고 텍스트의 바로 뒤에 가운데에 붙이십시오.

답변

관련 문제