Question

我有一些带有跨度的输入视图。

这是代码

div  class="inner-right2-calendar" style="text-align: center">
<div class="input-group date" style="display: inline-block;"  id="picker">
    <input id="startAppointment" type="text" class="form-control" placeholder="Enter Start Appointment"/>
        <span style="width: 20px; height: 33px;" class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
   </div>
<div class="input-group date" style="padding-left: 130px; margin-top: 20px;" id="picker2">
    <input id="endAppointment" type="text" class="form-control" placeholder="Enter End Appointment" />
    <span style="width: 20px; height: 33px;" class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

这是inner-right2-calendar

的CSS

.inner-right2-calendar {
background: #fafafa;
border-top-left-radius: 5px;
margin-top: 20px;
border-top-right-radius: 5px;
height: 30%;
width: 100%;
position: relative;

}

.input-group {

职位：相对;

边界崩溃：分开; }

我需要将class="input-group date"置于父div

中

我尝试使用text-align表示父级div，display: inline-block;表示子级。

但现在我看到了这个

我如何集中它？

Answer 1

删除所有内嵌样式，只需将form-inline和text-center添加到父级。就是这样。

注意：请尝试使用尽可能多的引导程序，并避免内联样式以获得所需的结果。 :)

<div class="inner-right2-calendar form-inline text-center">
  <div class="input-group date" id="picker">
    <input id="startAppointment" type="text" class="form-control" placeholder="Enter Start Appointment" />
    <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
    </span>
  </div>
  <div class="input-group date" id="picker2">
    <input id="endAppointment" type="text" class="form-control" placeholder="Enter End Appointment" />
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
  </div>
</div>

Answer 2

看起来.input-group.date的宽度是固定的。在这种情况下，你可以这样做：

.input-group.date
{
  width: 200px; /* whatever the fixed width is */
  margin: 0px auto;
  display: block;
}

Answer 3

此处为解决方案

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>
  <div  class="inner-right2-calendar" style="text-align: center">  
<div class="input-group date" style="padding-left: 130px; margin-top: 20px;" id="picker2">
    <input id="endAppointment" type="text" class="form-control" placeholder="Enter Start Appointment" />
    <span style="width: 20px; height: 33px;" class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>
<div class="input-group date" style="padding-left: 130px; margin-top: 20px;" id="picker2">
    <input id="endAppointment" type="text" class="form-control" placeholder="Enter End Appointment" />
    <span style="width: 20px; height: 33px;" class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>
</div>
</body>
</html>

中心输入，以div为单位

3 个答案: