Добавление кнопок «inline-block» с плавающим справа изображением

Question

Добавление кнопок «inline-block» с плавающим справа изображением

0

Я пытаюсь добавить логотип своего сайта в левую часть моего заголовка и кнопки в правой части вместе с меткой в одном div. Я попытался установить внешний div и внутренний div с инструкцией inline-block, но по какой-то причине он, похоже, не работает. Здесь html:

<section class="header">
        <div class="container">
        <div class="row">
             <div class="logo float-left">
                      <div class="signup">
                    <a href="#top">
                    <img src="" alt=""/> //LOGO
                    </a>
                               </div>
                </div>
            </div>
        </div>
        </section>

Здесь CSS:

.header {
    background: #ffffff;
    width: 100%;
    height: 120px;

}
.header .container {
    padding: 0px;
}

.logo {
    padding-top:0px;
    float:left;
}

.signup{

      padding-top:0px;
      float:right;  

}

J-LO 02 дек. 2013, в 03:16

Источник

Теги:

html

css

2 ответа

1

Пусть все будет просто. Использование HTML5? Также можно использовать тег заголовка, чтобы обернуть все это вместе.

Дайте изображению идентификатор, так как логотип будет уникальным. Блок регистрации - это div, но это будет форма? Пусть он дает уникальный идентификатор.

HTML

<header>
    <img src="" alt="Logo" id="logo" />
        <div id="signup">
            <a href="#">Whatever</a>
        </div>
</header>

<div id="content">

</div>

Тело сосредоточено только для того, чтобы было легко визуализироваться на массивном экране. Положите логотип налево. Не нужно обертывать его в div. Блок регистрации перемещается вправо. Наконец, div, который будет содержать ваш контент, очистит поплавки.

CSS

body {
  width:800px;
  margin:0 auto
}

header {
  overflow:hidden;
  height:100px;
  background:#0C6
}

/*The overflow allows for the height to be maintained for a background or whatever... */
img#logo {
  width:100px;
  height:50px;
  background:red;
  float:left
}

#signup {
  float:right
}

#content {
  clear:both
}

misterManSam 02 дек. 2013, в 00:27

Ещё вопросы

sheriffderek · Accepted Answer · 2013-12-02T01-09-00.000Z

FIDDLE

Держите это действительно очень просто

HTML

<header class="global-header">

<img class="logo" src="http://placehold.it/100x100" alt="logo" />    

<div class="signup">
    <a href="#">
        Sign-up
    </a>
</div>

CSS

.global-header {
    overflow: hidden; /* this should be clear-fixed instead */
}

.logo {
    display: block; /* get rid of the lame space beneith by default as well as to let it be floated */
    float:left;
}

.signup {
    float: right;
}