2013-09-10 2 views
-1

Я использую этот код для добавления фактического браузера я использую для моего пункта с идентификатором = браузер дальшеКак добавить буквальное без использования <br>

$(function() 
{ 
    $("#browser").text('sBrowser'); 
}); 

Проблема в том, что мой пункт с id=browser расположен один ряд слишком низко.

Дальше меня эту разметку

<div id="info"> 
    Torsdag : <time>2013-09-05 16:00:00</time> 
    <p id="browser"></p> 
</div> 

Я хочу, пункт разметки с id=browser должен быть расположен чуть ниже этой строки

Torsdag : <time>2013-09-05 16:00:00</time> 

без пустой строки между

Когда я запустите эту разметку в IE 9. Я получаю этот результат, поскольку вы можете видеть, что у меня есть пустой выше sBrowser

Торсдаг: 2013-09-05 16:00:00

sBrowser

Я хочу, чтобы это выглядело, как это вместо того, чтобы

Torsdag : 2013-09-05 16:00:00 
sBrowser 

Так что делать Я должен измениться, чтобы получить тот внешний вид, который я хочу.

Вот полная разметка и css.

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset = "utf-8"> 
     <title>Kontaktuppgifter</title> 
     <script src="js/jquery.js"></script> 
     <script src="js/flygbolag.js"></script> 
     <script type="text/javascript"> 

     $(function() //wait until the DOM is complete 
     { 
      $("#browser").text('sBrowser'); 
     }); 

     </script> 

     <style type = "text/css"> 
     body 
     { 
      font-size:small; 
      width:72em; 
      background : #87a5be url(img/bg.jpg) no-repeat right bottom fixed; 
      background-repeat:no-repeat; 
      margin:0; 
      padding:0; 
      margin:0.2em auto; 
      } 

      header #info 
      { 
      font-size:120%; 
      float:right; 
      font-weight:bold; 
      } 
     </style> 
    </head> 

    <body id="kontakt"> 
    <header> 
     <div> 
      <div id="info"> 
       Torsdag : <time>2013-09-05 16:00:00</time> <br /> 
       <p id="browser"></p> 
      </div> 
     </div> 
    </header> 
</body> 
</html> 
+0

Попробуйте использовать '' span id = "browser"> 'вместо абзаца? 'p' добавляет линию собственных меток. –

+0

«Литерал», похоже, означает «разрыв строки». И кажется, что вы хотите вызвать принудительный разрыв строки, не вызывая ничего другого, что для элемента 'br', но заголовок вопроса говорит "Без использования'
'". Однако в вашем примере кода есть '
'. –

+0

Почему бы не использовать div вместо абзаца? В качестве альтернативы уменьшите маржу и дополнение вашего элемента абзаца. – knittl

ответ

1

Вы пробовали добавлять к вашему CSS:

p#browser{ 
    margin:0; 
    padding:0; /* only if needed... */ 
} 

BEFORE и AFTER

И КСТАТИ <br> вы используете - не требуется, а <p> уже блок -уровневый элемент (если не определено строго как inline или встроенный блок)


Что вам может понадобиться также (а) это хороший небольшой сброс CSS, как е.g:

+0

Зачем использовать 'p', а затем стирать поля по умолчанию, когда вы можете решить, какой у вас элемент? И зачем рекомендовать смазку для сброса CSS, которая удалит все виды стилизации по умолчанию, вызывая различные проблемы, когда вы упомянули о способе удаления конкретного стиля, который вызывает проблему? –

+0

@jukka P был в оригинальной разметке html, вот почему я решил указать на настоящую проблему и исправление, не касаясь HTML. Использование DIV также является решением. И сброс CSS ... (я не говорю, что он всегда удобен, но ...) не скажите, что вы никогда не использовали его. Использует его даже Boorstrap. –

0
<div> 
    <div id="info">Torsdag : 
     <time>2013-09-05 16:00:00</time> 
     <br /> <span id="browser"></span> 
    </div> 
</div> 

, как здесь: http://jsfiddle.net/psQJg/


EDIT попеременно: CSS, как

#info,#browser {float:left;} 

разметки как:

<div> 
    <div id="info">Torsdag : 
     <time>2013-09-05 16:00:00</time> 
     <span id="browser"></span> 
    </div> 
</div> 

http://jsfiddle.net/psQJg/1/

0

Похоже, что настоящая проблема заключается в том, что вы используете элемент p, не принимая во внимание, что он имеет верхний и нижний пределы по умолчанию. Лучшим решением является использование элемента, который не имеет такого рендеринга по умолчанию, а именно div. Вам не понадобится (и не следует использовать) br, потому что div отображается как блок, начиная с новой строки.

 <div id="info"> 
      Torsdag : <time>2013-09-05 16:00:00</time> 
      <div id="browser"></div> 
     </div> 
Смежные вопросы