Question

我使用此代码将我使用的实际浏览器添加到我的段落，其中id = browser进一步向下

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

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

Answer 1

您是否尝试过添加 CSS ：

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

BEFORE和AFTER

顺便说一下你使用的<br> - 不需要，因为<p>已经是块级别的元素（如果没有严格定义） as inline 或 inline-block ）

你可能还需要（相反）是一个很好的小CSS重置，例如：http://meyerweb.com/eric/tools/css/reset/

Answer 2

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

如下：http://jsfiddle.net/psQJg/

交替编辑：CSS as

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

Answer 3

似乎真正的问题只是你使用p元素而没有考虑它有默认的顶部（和底部）边距。最好的解决方案是使用没有此类默认呈现的元素，即div。您不需要（也不应该使用）br，因为div将从新行开始呈现为块。

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

如何在不使用<br/>的情况下添加文字

3 个答案: