ウェブサイトに表示されている日付と日付を取得しようとしています。しかし、それらは互いに下にあり、私はそれらを並べて欲しいです。display：inlineを使用しましたが、まだ機能していません。両方の入力フィールドに日付ピッカーもありますが、1つでしか機能しません。理由はまったくわかりません。また、表示されている日付ピッカーは他の入力ボックスの下に表示されているため、部分的にしか表示されません。誰かがこれらの問題を解決する方法を知っていますか？どんな助けにも非常に感謝するでしょう。
HTML
<h3> Set your holiday dates </h3>
<p class="date"> Date From: </p>
<input type="text" id="datepickerdoc">
<p class="date">Date To: </p>
<input type="text" id="datepickerdoc">
更新しました
<h3> Search for your hotel you booked </h3>
<div class="input-group">
<input type="text" name="search" id="searchHotel" class="form-control"/>
<a href="#Hotels"><span class="input-group-addon" value="search" id="submit" name="submit">
<i class="fa fa-search"></i>
</span></a>
</div>
jQuery
$(function () {
$("#datepickerdoc").datepicker();
});
CSS
.date{
display:inline;
}
#searchHotel {
max-width: 20%;
}
pタグをターゲットにしているため、CSSは機能しませんが、日付ピッカーがpタグ内になく、同じIDが日付ピッカーに2回使用されていますが、そのためのクラスを使用できます。
次のようなものを試してください：
<h3> Set your holiday dates </h3>
<span class="dpWrapper"><p class="date"> Date From: </p>
<input type="text" class="datepickerdoc"> </span>
<span class="dpWrapper"><p class="date">Date To: </p>
<input type="text" class="datepickerdoc"> </span>
CSS：
.dpWrapper {
display:inline-block;
}
jQuery：
$(function () {
$(".datepickerdoc").datepicker();
});
動作中のJSFiddlehttps ： //jsfiddle.net/cfy053aw/1/
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加