Question

我正在使用内容管理系统，我已经设置了一个类，通过选择文本和应用类来创建自己的按钮。现在，客户希望所有按钮都能正确对齐，这很容易与“浮动：正确;”但它看起来与按钮下面的任何内容重叠，所以我想知道是否有人知道修复或更好的方法解决这个问题，请记住它在CMS中只是将一个类应用于p或跨度。

.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>

Answer 1

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

.LinkButtons + p {
    clear: right;
}

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

.LinkButtons + * {
    clear: right;
}

for all :)

<强>更新

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

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

/* With */

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

该规则仅清除自身没有按钮的元素的权利。

<强> jsfiddle

Answer 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>

不使用浮动将内联块对齐到右侧

2 个答案: