Question

我想在多行中的一个大按钮旁边显示一些文字而不使用float。

这是我的代码

<div>
    <button>Boton</button>
    <p>asasd asd asdasdas dsadasdas dasd sdsfasdasd sadsadas da sdasdasdasd asdasdasdasd dassda sdasdasd</p>
</div>

和这个css：

div{
    background: red;
    width: 100%;
}

button{
    height: 200px;
}

p{
    display: inline;
}

http://jsfiddle.net/dbZB2/

我想看到这样的事情 http://img13.imageshack.us/img13/8343/capturaft.jpg

有可能吗？

Answer 1

您必须添加一些宽度并尝试使用inline-block代替inline。

jsFiddle

注意：IE7及更早版本不支持内联块，因此请小心。对于较旧的IE版本，您可以使用*display:inline;zoom:1;

Answer 2

这与上面的内容大致相同 - 但我确实清理了一下 - 以防万一你想要它的样式就像在例子中一样。祝你好运！

JSFIDDLE

HTML

<div class="example">
    <button>Button</button>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
.example {
    position: relative;
    background: red;
    width: 100%;
}
p, button {
    display:inline-block;
}
button {
    width:140px;
    height: 70px;
    vertical-align:top;
    margin: 10px 5px;
}
p {
    width:200px;
    margin: 0 3px;
    padding:5px;
}

不使用float的按钮旁边的多行文本

2 个答案: