Html в одну строку: html — div элементы в одну строку

Содержание

html — div элементы в одну строку

Как расположить div элементы в одну строку?

.div1 { display: inline; }
<div>
       <img .... >
    </div>
    <div>
       <img .... >
    </div>
    <div>
       <img .... >
    </div>

Картинки выстраиваются в ряд. Но как быть, если например, под картиной нужно сделать описание?

.div1 { display: inline; }
<div>
   <img .... >
   <div> image1 </div>
</div>
<div>
   <img .... >
   <div> image2 </div>
</div>
<div>
   <img .... >
   <div> image3 </div>
</div>

То элементы div1 снова начинаются с новой строки. как быть?

html
css

Просто

.div1 {display:inline-block;}

А вот так можно уменьшить количество кода:

.about {
 display:inline-block;
}
.about img {
 display:block;
}
<div>
   <div>
   <img src="pic.  png">
   image1
   </div>
   <div>
   <img src="pic.png">
   image2
   </div>
   <div>
   <img src="pic.png">
   image3
   </div>
</div>

Я советую использовать flex, вот пример кода:

HTML file:

<div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS file:

.container{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    border: 5px solid black;
    padding: 20px;
}
#con1{
    width: 150px;
    border: 2px solid black;
    background-color: green;
    height: 150px;
    border-right: 0px;
}
#con2{
    width: 100%;
    border: 2px solid black;
    background-color: yellow;
    height: 300px;
}
#con3{
    width: 150px;
    border: 2px solid black;
    border-left: 0px;
    background-color: green;
    height: 150px;
}

Советую почитать

Используй display: inline-block или float: left на селектор . div1 Подробнее про выравнивание элементов.

Все дело в том, что внутри — блочный элемент. Попробуйте так:

<span>
    <div>123</div>
</span>
<span>
    <div>123</div>
</span>
<span>
    <div>123</div>
</span>

SPAN — inline элемент, но DIV — блочный. Результат — все в столбик.

Уберите везде DIV — получите результат в строку.

Для того, чтобы получить то, что хотите — можно указать не display: inline, а display: inline-block, либо делать через таблицы (не в тегах, а в стилях — например, display: table)

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

html — Элементы в одну строку

Вопрос задан 11 лет 8 месяцев назад

Изменён 6 лет 5 месяцев назад

Просмотрен 22k раз

Подскажите, плизз, я в HTML не очень шарю, нужен тег типа присоединения или пробела (чтобы было в одной строке) вот так

А то у меня вот так выглядит

Заранее спасибо!

html
css

html:

<div>
   <div><!--здесь код кнопки--></div>
   <div><!--здесь код кнопки--></div>
   <div><!--здесь код кнопки--></div>
</div>

css:

. vk,.ok,.mail{float:left;margin:0 10px;}

Можно использовать display: inline-block для элементов.

Пример расположения элементов в одну строку:

.box div { width:90px; display:inline-block; }

  <div>
    <div>#1 Первый</div>
    <div>#2 Второй</div>
    <div>#3 Третий</div>
  </div>

display — многоцелевое свойство, которое определяет, как элемент должен быть показан в документе. Значение inline-block — генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно строчному элементу.

пробел можно использовать alt+0160(на нумпаде) вопрос в том, как ты их размещаешь… код выложи, посмотрим, что с ними сделать)

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Как заставить содержимое div оставаться на одной строке с помощью HTML и CSS?

спросил 12 лет, 3 месяца назад

Изменено 9 месяцев назад

Просмотрено 513 тысяч раз

У меня есть длинный текст внутри div с определенной шириной

HTML:

 Переполнение стека — ЛУЧШЕЕ!!!

CSS:

 раздел {
    граница: 1px сплошной черный;
    ширина: 70 пикселей;
}

Как заставить строку оставаться на одной строке (т. е. обрезать ее посередине «Переполнения»)?

Я пытался использовать overflow: hidden , но это не помогло.

HTML
CSS

Попробуйте это:

 дел {
    граница: 1px сплошной черный;
    ширина: 70 пикселей;
    переполнение: скрыто;
    пробел: nowrap;
}

Использовать пробел:nowrap и переполнение:скрыто

http://jsfiddle.

net/NXchy/8/

В разделе CSS используйте пробел : nowrap; .

 раздел {
    ширина: 100 пикселей;
    пробел: nowrap;
    переполнение: скрыто;
    переполнение текста: многоточие;
}

 Переполнение стека — ЛУЧШЕЕ!!!

Я сделал скрипку:

http://jsfiddle.net/audetwebdesign/kh5aR/

RobAgar указал white-space:nowrap .

Пара моментов: Вам нужно overflow: hidden , если вы не хотите, чтобы лишние символы торчали в макете.

Кроме того, как уже упоминалось, вы можете использовать пробел

: pre (см. EnderMB), имея в виду, что pre не свернет пробел, тогда как пробел: nowrap будет.

 раздел {
    дисплей: гибкий;
    flex-направление: строка;
}

было решением, которое сработало для меня. В некоторых случаях со списками div это необходимо.

Некоторые альтернативные значения направления: row-reverse , column , column-reverse , unset , initial , и inherit . Которые делают то, что вы от них ожидаете.

Добавьте это в свой div:

 white-space: nowrap;

http://jsfiddle.net/NXchy/1/

Попробуйте. Он использует pre , а не nowrap , поскольку я предполагаю, что вы хотите, чтобы это работало аналогично

, но любой из них будет работать нормально:

 div {
    граница: 1px сплошной черный;
    максимальная ширина: 70 пикселей;
    пробел: предварительно;
}

http://jsfiddle.net/NXchy/11/

Ни один из предыдущих ответов не помог мне.

Существуют случаи, когда независимо от того, что вы делаете, и в зависимости от системы (Oracle Designer: Oracle 11g - PL/SQL), div всегда будут переходить на следующую строку, и в этом случае вы должны использовать тег span вместо.

Это сотворило со мной чудеса.

 
    

Просто ваш текст ||
<промежуток поплавка: слева; пробел: nowrap; переполнение: скрыто;>

в диапазоне вам нужно добавить: { дисплей: блок; }

 интервал {
  ширина: 70 пикселей;
  граница: 1px сплошной черный;
  дисплей: блок;
  переполнение: скрыто;
  пробел: nowrap;
  переполнение текста: многоточие;
  }

 Переполнение стека — ЛУЧШЕЕ!!!

Попробуйте установить высоту, чтобы блок не мог увеличиваться для размещения вашего текста, и оставьте параметр overflow: hidden .

Вот пример того, что вам может понадобиться, если вам нужно отобразить две строки в высоту:

 div {
    граница: 1px сплошной черный;
    ширина: 70 пикселей;
    высота: 2,2 см;
    переполнение: скрыто;
}

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.

html — Сохранить строку текста как одну строку — перенести всю строку или ничего не делать

Задавать вопрос

спросил 11 лет, 11 месяцев назад

Изменено 7 лет, 3 месяца назад

Просмотрено 165 тысяч раз

Я хотел бы сохранить строку текста вместе, чтобы либо вся строка опускалась на строку, либо вообще ничего не было

Приемлемо

 Как мне обернуть эту строку текста - спросил Питер 2 дня назад

Приемлемо

 Как мне обернуть эту строку текста
- спросил Петр 2 дня назад

Неприемлемо

 Как мне обернуть эту строку текста – спрашивает Питер
2 дня назад

Это достижимо в CSS?

HTML
CSS

Вы можете использовать пробел : nowrap; для определения этого поведения:

 // HTML:

 .No related posts.

Html в одну строку: html — div элементы в одну строку

html — div элементы в одну строку

HTML file:

CSS file:

Зарегистрируйтесь или войдите

Отправить без регистрации

Отправить без регистрации

html — Элементы в одну строку

Зарегистрируйтесь или войдите

Отправить без регистрации

Отправить без регистрации

Как заставить содержимое div оставаться на одной строке с помощью HTML и CSS?

Зарегистрируйтесь или войдите в систему

Опубликовать как гость

Опубликовать как гость

html — Сохранить строку текста как одну строку — перенести всю строку или ничего не делать

Добавить комментарий Отменить ответ

Рубрики

Рубрики