Question

这是我的jsfiddle：

我的HTML：

<p>With approximately 100 sessions available, attendees will have the opportunity to build their knowledge on a variety of industry-specific topics.
    <a href="#" class="btn btn-right-align">Right-aligned<br />Button here</a>
</p>

我的CSS：

a {
    color: #2d6798;
    text-decoration: none;
}

input[type=submit], button, .btn {
    font-size: 18px;
    display: inline-block;
    background: #d13802;
    padding: 10px 19px;
    color: #fff;
    margin: auto;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    cursor: pointer;
    font-family: 'Open Sans Condensed',sans-serif;
    font-weight: 100;
    line-height: 18px;
    word-wrap: break-word;
    white-space: pre-wrap;
    line-height: 25px;
    max-width: 160px;
}

.btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.btn-right-align {
    width: 160px;
    float: right;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

我不知道我是不是只有一个金发碧眼的时刻，但我一直试图让这件事情起作用一段时间。每当我浮动图像以允许文本环绕它时，我从来没有遇到过这个问题，但是我尝试了内联块，块等等。我无法获得任何工作。我需要这个按钮是200px，但仍然有与页面上的其他按钮相同的填充因此所有的CSS声明。它们用于其他常规按钮等。

感谢您的帮助！

Answer 1

将链接放在文本之前：

<p><a href="#" class="btn btn-right-align">Right-aligned<br />Button here</a>With approximately 100 sessions available, attendees will have the opportunity to build their knowledge on a variety of industry-specific topics.</p>

<强> jsFiddle example

Answer 2

这是你想要的吗？

http://jsfiddle.net/4g4Jy/4/

我刚刚移动了文本

上方的按钮

<p><a href="#" class="btn btn-right-align">Right-aligned<br />Button here</a>With approximately 100 sessions available, attendees will have the opportunity to build their knowledge on a variety of industry-specific topics.
With approximately 100 sessions available, attendees will have the opportunity to build their knowledge on a variety of industry-specific topics.
With approximately 100 sessions available, attendees will have the opportunity to build their knowledge on a variety of industry-specific topics.

</p>

Answer 3

在p：

的开头尝试使用a

http://jsfiddle.net/grrenier/3PWzU/

<p><a href="#" class="btn btn-right-align">Right-aligned<br />Button here</a>With approximately 100 sessions available, attendees will have the opportunity to build their knowledge on a variety of industry-specific topics.</p>

Answer 4

使用您提供的代码我没有任何问题，文字就是这样的！

box with all the text aroung

您甚至可以在 p标记

之前或之后放置框

文本不会包围浮动块

4 个答案: