маржа новой строки не выглядит хорошо

I have a href, which comes after a sentence. but according to the words it can in the same line with the sentence or in a new line. but because of the margin-left:5px; it doesn't look good when it is in a newline. how can i make it that if there isn't any other words in the left it would start from the very beginning. http://jsfiddle.net/tVC43/11/

<div class="box" style="border:1px solid red;">
   welcome to xxxxxxxxx part.
  hi thomas
  </div>
  <div class="box" style="left:200px; border:1px solid red;">
   welcome to xxxxxxxxx.
  hi thomas
  </div>
1
nl ja de

2 ответы

Why are you using ? I don't find that in your example and in your example everything looks good.

По умолчанию стиль для ссылок должен означать, что они отображаются правильно в соответствии с текстом. Если ваши ссылки не отображаются : block или display: inline-block , то margin не будет вести себя так, как вы ожидаете, по нескольким строкам текста.

See here for more explanation: http://www.w3.org/TR/CSS21/visuren.html#inline-formatting

0
добавлено
извините, код выше был другим, я обновил скрипку.
добавлено автор user2020933, источник

Добавлен пример Jsfiddle. Добавьте некоторые правила CSS для nobr , как показано ниже.

<div class="box" style="border:1px solid red;">
   welcome to xxxxxxxxx part.
  hi thomas
</div>
<div class="box" style="left:200px; border:1px solid red;">
   welcome to xxxxxxxxx.
  hi thomas
</div>

CSS:

.box{
  width:155px;
  height:100px;
  border:1px solid; 
  position:absolute;
}

nobr {
    clear: left;
    display: block;
}

float: left & display: block;

Пожалуйста, дайте мне знать.


Solution #2: - simply remove style="margin-left:5px" from the second nobr

0
добавлено
отредактировал мой ответ на основе вашего обновления кода, nobr не требует встроенного стиля. также я бы предложил написать в CSS цвет границы, а не встроенный css.
добавлено автор Grávuj Miklós Henric, источник
затем просто удалите style = "margin-left: 5px" из второго nobr
добавлено автор Grávuj Miklós Henric, источник
Прости? вы меня путаете, если это изменчиво, почему бы вам не изменить его?
добавлено автор Grávuj Miklós Henric, источник
на примере jsfiddle следующий трюк дает результат: nobr {margin-left: 0! important; }
добавлено автор Grávuj Miklós Henric, источник
извините, код выше был другим, я обновил скрипку.
добавлено автор user2020933, источник
действительно работает для меня, потому что я не хочу, чтобы два слова были разделены в новой строке. также это не тот ответ, который я искал, потому что в первом div «hi thomas» переходит к новой строке, я хочу, чтобы мои конечные результаты были похожими на мои результаты jsfiddle, которые ожидаются во втором, я не хочу пространства до «hi thomas» ».
добавлено автор user2020933, источник
:) :) Я получаю данные с сервера, поэтому он изменчив, эти два div являются сценариями, которые могут произойти.
добавлено автор user2020933, источник
данные nobr поступают с сервера, поэтому он может быть любой длины, в одном условии он будет рядом с предложением, которое я хочу иметь 5px-пространство, если есть слово слева. в другом случае он начнется в новой строке, но я не хочу, чтобы это 5x-пространство, если оно находится в новой строке? который я показал оба условия в демо.
добавлено автор user2020933, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)