Question

我正试图在我的网站上显示一个来回日期。但它们在彼此之下，我希望它们并排。我用过display：inline但它仍然没有用。我在两个输入字段上都有一个日期选择器，但它只适用于一个。不知道为什么。显示的日期选择器显示在其他输入框下方，因此您只能部分看到它。有谁知道如何解决这些问题。非常感谢任何帮助。

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%;
}

Answer 1

您有两个具有相同ID的元素（datepickerdoc）。因此，只有其中一个由代码设置。一种解决方案是将它们都设置为某个类，然后更改查询以选择该类而不是id。

Answer 2

将元素从id="datepickerdoc"更改为class="datepickerdoc"，以便只用一个开头修复问题。 ID需要独一无二。

＆＃13;

$(function () {
    $(".datepickerdoc").datepicker();
});

＆＃13;

.date{
    display:inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.4/datepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.4/datepicker.js"></script>
<h3> Set your holiday dates </h3> 

<p class="date">
  Date From:
  <input type="text" class="datepickerdoc">
</p>
<p class="date">
  Date To:
  <input type="text" class="datepickerdoc">
</p>

＆＃13;

Answer 3

您的CSS无法正常工作，因为您的目标是p标签，但是日期选择器不在p标签内，并且您对datepicker使用了两次相同的ID，但可以使用一个类：

尝试类似：

<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();
});

使用JSFiddle https://jsfiddle.net/cfy053aw/1/

日期选择器不起作用

3 个答案: