Question

我有一个网页，我想要有以下元素组合：

<div><Label>                              <Button1><Image><Button2></div>

我发现的问题是整个div不在一行中。

我将这个CSS代码用于div：

width: 100%;
display: block;

图片：

clear: both;
width: 90px;
height: 40px;
margin-left: 3px;
margin-right: 3px;
margin-top: 5px;

按钮：

  float: right;
   margin-top: 12px;
   height: 45px;
   width: 45px;
   margin-right: 5px;

这会产生以下结果：

 <div><Label><Image>                            <Button1><Button2></div>

如果我在图片上使用float: right，我会得到以下内容：

<div><Label>                           <Button2></div>
                                 <Button1><Image>

如何获得理想的行为？

Answer 1

将标签浮动并将文本对齐按钮＆amp;图像。

＆＃13;

div {
  text-align: right;
}
button,
img {
  vertical-align: middle;
}
label {
  float: left;
}

＆＃13;

<div>
  <label>I'm a label</label>

  <button>Button 1</button>
  <img src="http://lorempixel.com/output/abstract-q-c-50-50-6.jpg" alt="" />
  <button>Button 2</button>
</div>

＆＃13;

Answer 2

你想要在一行中使用img按钮吗？以下是基于样式的解决方案：http://jsfiddle.net/cn61gxmh/6/

 <div class="wrapper">
    <label>label </label>
    <div class="buttons">
       <button>button 1</button>
       <img></img><button>button 2</button>
    </div>
 </div>

    .wrapper img{
width: 90px;
height: 40px;
margin-top: 5px;}

.buttons{text-align: right;}

button{
   margin-top: 12px;
   height: 45px;
   width: 45px;
    margin-right: 5px;
}

CSS如何在按钮之间放置图像？

2 个答案: