4 
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$("select#choosebook").change(function(){
    $(".title").slideDown("medium");
});
</head>

<body>
<div class="booktitle">
    <p>
    <font color="red">*</font>Book:
    <select id="choosebook">
        <option>Choose a Book...</option>
        <option>Add new Book...</option>
    </select>
    <div class="title" style="display:none">**
        <font color="red">*</font>Title: <input type="text">
    </div>
    <font color="red">*</font>Page: <input type="text" class="page">
</div>
</body>
</html>

クラス "title" を持つ div は、たとえそれが隠されていても、"Book:" 入力と "Page:" 入力の間のスペースを占めています! この Web ページの他の div にはありません。JavaScriptがアクティブになってスライドダウンするまで、スペースを占有しないようにするにはどうすればよいですか?

ありがとうございました！

編集: 要求に応じて、ここに問題のスクリーンショットがあります。Book 入力と Title 入力の間のギャップを取り除こうとしています。「タイトル」入力が下にスライドする前: 「タイトル」入力前のばかげたギャップが滑り落ちます。 「タイトル」入力が下にスライドした後: 「タイトル」入力後のアホなギャップがズラリ。

そして、ここに私のCSSがあります:

<style type="text/css">
    @import url("layout.css");
    .page {
        width: 50px;
    }
    .URL, .booktitle {
        margin-left: 24px;
        display:none;
    }
    .title {
        display: none;
    }
    .newtag {
        display:none;
    }
    .amount, .addtag {
        width: 100px;
    }
    .details {
        width: 275px;
    }
</style>
4

3 に答える 3

7

It's not the div that's creating the space, it's the <br> you have right after it.

And please, get rid of the <font> tags. My eyes are bleeding.

于 2012-04-23T06:49:15.413 に答える
1

Book ドロップダウンの下の巨大なスペースについて話している場合、それはp、HTML で開いたタグを閉じるのを忘れたためです。タグはデフォルトのp余白を追加しています。したがって、スペース。タグを外すpと余白がなくなります。

また、あなたの質問へのコメントで述べたように、常にあなたのページに追加doctypeしてください。

于 2012-04-23T07:27:09.990 に答える
0

font 要素は非推奨です。ここでは span を使用してください。スクリプト要素を閉じていません。

少しクリーンアップしたところ、次のようになりました。

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$("select#choosebook").change(function(){
    $(".title").slideDown("medium");
});
</script>
</head>

<body>
<div class="booktitle">
    <span style="color:red">*</span>Book:
    <select id="choosebook">
        <option>Choose a Book...</option>
        <option>Add new Book...</option>
    </select>
    <div class="title" style="display:none">
        <span style="color:red">*</span>
        Title: <input type="text" />
    </div>
    <span style="color:red">*</span>
    Page: <input type="text" class="page">
</div>
</body>
</html>

ここでフィドルを見ることができます：http: //jsfiddle.net/Allan/cJ6Jq/は私のために働きます。

于 2012-04-23T07:03:08.333 に答える