我在我的网站上使用jquery.alerts,我在设置一些问题时遇到了一些问题。 我似乎无法将按钮放在框中,我还想在两个按钮之间添加更多填充。
查看我正在谈论的内容的最简单方法是,只需访问网站www.beerbattle.net/skunk/并点击“忘记密码?”链接。你会看到我正在谈论的内容。
对于jquery.alerts的CSS,它如下:
#popup_container {
font-family: Arial, sans-serif;
font-size: 12px;
min-width: 400px; /* Dialog will be no smaller than this */
max-width: 600px; /* Dialog will wrap after this width */
background: #FCCB6C;
border: solid 2px #000;
color: #000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
height: 130px;
}
#popup_title {
font-size: 14px;
font-weight: bold;
text-align: center;
line-height: 1.75em;
color: #000;
background: #FBB62D url(images/title.gif) top repeat-x;
border: none;
border-bottom: solid 1px #999;
cursor: default;
padding: 0em;
margin: 0em;
}
#popup_content {
background: 16px 16px no-repeat url(images/info.gif);
padding: 1em 1.75em;
margin: 0em;
}
#popup_content.alert {
background-image: url(images/info.gif);
}
#popup_content.prompt {
background-image: url(images/help.gif);
}
#popup_message {
padding-left: 48px;
}
#popup_panel {
text-align: center;
margin: 1em 0em 0em 1em;
}
#popup_prompt {
margin: .5em 0em;
}
.buttons a, .buttons button{
background: #b55100;
border: none;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
color: #ffffff;
display: block;
font: 18px Georgia, "Times New Roman", Times, serif;
letter-spacing: 1px;
margin: auto;
padding: 7px 25px;
text-shadow: 0 1px 1px #000000;
text-transform: uppercase;
text-align: center;
float: left;
}
.buttons button{
width:auto;
padding:4px 10px 3px 7px; /* IE6 */
}
.buttons button[type]{
padding:5px 10px 5px 7px; /* Firefox */
line-height:17px; /* Safari */
}
*:first-child+html button[type]{
padding:4px 10px 3px 7px; /* IE7 */
}
.buttons button:hover {
background: #fbb62d;
cursor: pointer;
}
我曾尝试过改变浮动:左;中间,但它使按钮出于任何原因一个在另一个上面。 任何帮助是极大的赞赏。谢谢!
答案 0 :(得分:0)
您可以通过更改.buttons a, .buttons button
的三种样式来执行此操作(仅在此对话框的上下文中,如有必要)。改变这些行:
.buttons a, .buttons button {
display: block;
margin: auto;
float: left;
}
对于这些:
.buttons a, .buttons button {
display: inline-block;
margin: -5px 5px 0 5px;
}
所以这会将display
从'block'更改为'inline-block',将margin
从'auto'更改为'-5px 5px 0 5px'(根据需要调整以获得间距想要),并完全删除float
。
更详细的说明:即使您在包含元素中有text-align: center;
,按钮一直向左的原因是float: left;
。但是摆脱它使得它们一个在另一个上面显示为全宽度块,并且块元素不响应包含元素的文本对齐,只有内联元素响应。这就是你将display: block;
改为`display:inline-block;'的原因。这种方式对于大多数事情来说就像阻挡一样,但是行动起来进行定位。因此,在这两个更改之后,按钮在底部中心对齐,一个在另一个旁边。边际变化只是为了在它们之间增加空间并在对话框中更好地居中。