0

我正在使用内容管理系统，并且我已经为客户端设置了一个类，通过选择文本和应用类来制作自己的按钮。现在客户希望所有按钮右对齐，这很容易使用“float:right;” 但它似乎与按钮下方的任何内容重叠，所以我想知道是否有人知道解决此问题的方法或更好的方法，请记住它在仅将类应用于 ap 或 span 的 CMS 中。

.LinkButtons {
display: inline-block;
*display: inline;
padding:5px 10px 5px 10px;
background-color:#00649c;
color:#fff;
text-decoration:none;
font-weight:bold;
font-size:12px;
float:right;
}

.LinkButtons:hover, .linkbuttons:hover {background-color:#00718b; cursor:pointer; text-decoration:none;}
.LinkButtons a, .linkbuttons a {color:#fff; text-decoration:none;}
.LinkButtons a:hover, .linkbuttons a:hover {color:#fff; text-decoration:none;}

<p>Text above</p>
<p class="LinkButtons">MORE INFO</p>
<p>Text below gets the button overlapping due to the float floating over top</p>
4

2 回答 2

3

好的，我明白你的意思。试试这个 jsfiddle。您希望内联块元素清除其左侧的所有空间。这可以通过在您的 CSS 中添加以下规则来实现 

.LinkButtons + p {
    clear: right;
}

这会将所有<p>元素，即所述按钮的下一个兄弟元素，设置为不允许其右侧的任何内容。当然，您可以修改此规则以适应您希望出现在按钮之后的其他元素。或者你可以做 

.LinkButtons + * {
    clear: right;
}

对全部 ：）

更新

使用此技术将不允许多个按钮在同一行上，如果您想将多个按钮放在同一行上，请使用以下。

/* Replace */
.LinkButtons + * {
    clear: right;
}

/* With */

.LinkButtons+:not(.LinkButtons){
    clear: right;
}

该规则仅清除本身不是按钮的元素的权限。

jsfiddle

于 2013-05-01T01:31:15.367 回答
2

在这里看看这个 jsFiddle：

http://jsfiddle.net/a8qqU/

我制作了一个包含内联按钮的包装 div。然后我使用该text-align属性并将其设置为“右”以使按钮向右对齐。

CSS：

.LinkButtons {
    display: inline-block;
    *display: inline;
    padding:5px 10px 5px 10px;
    background-color:#00649c;
    color:#fff;
    text-decoration:none;
    font-weight:bold;
    font-size:12px;
}

.align-right {
    text-align:right;
}

.LinkButtons:hover, .linkbuttons:hover {
    background-color:#00718b;
    cursor:pointer;
    text-decoration:none;
}

.LinkButtons a, .linkbuttons a {
    color:#fff;
    text-decoration:none;
}

.LinkButtons a:hover, .linkbuttons a:hover {
    color:#fff;
    text-decoration:none;
}

HTML：

<p>Text above</p>
<div class="align-right"><p class="LinkButtons">MORE INFO</p></div>
<p>Text below gets the button over top</p>
于 2013-05-01T01:05:24.387 回答