CSS Как поместить изображение между кнопками?

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>

Как добиться желаемого поведения?

html css

0

Irgendw Pointer 13 Мар 2015 в 13:48

Answer 1

Разместите метку влево и выровняйте текст кнопки и изображения.

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

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

3

Paulie_D 13 Мар 2015 в 10:56

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;
}

0

md27 13 Мар 2015 в 12:30

CSS Как поместить изображение между кнопками?

2 ответа

Похожие вопросы

Новые вопросы

html