0

私は私を悩ませている問題を抱えています。行の高さは、以前の font-size による継承に基づいているようです。

div "textruta" 内のコードは CKeditor によって生成されるため、多くのがらくたコード..

編集：

コードは次のとおりです。

<!DOCTYPE html>
<head>
  <meta charset="iso-8859-1">
  <title> timesheets.js :: Slideshow Engine </title>

<link href='http://fonts.googleapis.com/css?family=Frijole' rel='stylesheet' type='text/css'>
<style>

* {
margin: 0;
padding: 0;
}
body {
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 28px;
}
</style>
<div id="textruta" class="textruta" style="width: 280px; height: 116px; position: absolute; top: 100px; left: 120px; visibility: visible;">
<span id="previewtext1">
<p>
<span style="font-size:28px">
    <span style="font-family:frijole">
        <span style="background-color:#FFFF00">Hello There!</span>
    </span>
<br><br>
    <span style="font-size:18px">
        <span style="font-size:26px">
            <span style="color:#FFFFFF"><span style="background-color:#FF0000">123:-</span>
         <br><span style="font-size:18px"><em><span style="background-color:#FF0000">(234:-)</span></em>
         </span>
     </span>
     </span>
     </span>
     </span>
</p>
</span>
</div>

</body>
</html>

結果：

ここに画像の説明を入力

望ましい結果:

ここに画像の説明を入力

何か案は？

テストページへのリンクはこちら

4

5 に答える 5

2

ここに深刻なコードがあります：

<div id="textruta" class="textruta" 
     style="padding:10px; height:116px; text-align: left; 
            left:160px; top:100px; width:280px;">
    <p>
    <span style="font-size:28px">
    <span style="font-family:frijole">
    <span style="background-color:#FFFF00">
      Hello There!
    </span>
    </span>
        <br></br>
        <br></br>
    <span style="font-size:18px"><span style="font-size:26px">
    <span style="color:#FFFFFF"><span style="background-color:#FF0000">
      123:-
    </span>
    <br></br>
    <span style="font-size:18px">
    <em>
    <span style="background-color:#FF0000">
      (234:-)
    </span>
    </em>
        </span>
        </span>
        </span>
        </span>
        </span>
    </p>
</div>

これらのハードコードされた改行が表示されます: <br><br>、これがおそらく余分な空白の原因です。

このようなものを生成するには、ある種の WYSISWG エディターを使用しているに違いありません。

于 2013-09-11T13:13:29.327 に答える
0

はい、
htmlから移動できる場合、または要素をcssに削除できる場合、htmlアイテムは余分なスペースを作成します

br {
  display: none;
}

しかし、それを行うことはお勧めしません。

于 2013-09-11T13:17:52.370 に答える
0

これを試してください：

.hellomessage {
margin-bottom: -20px;
}

大丈夫です、私はそれに行きました、そしてコードはちょっと長いです

お役に立てれば ：）

于 2013-09-11T13:11:46.207 に答える