设置时间选择器宽度

我正在使用特伦特理查森时间选择器。（http://services.xample.ch:8080/static/js/trentrichardson-jQuery-Timepicker-Addon/）设置时间选择器宽度

下面是我的代码：

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="js/jquery-ui-timepicker-addon.css"> 
    <link rel="stylesheet" href="js/jquery-ui-themes-1.11.1/themes/smoothness/jquery-ui.css"> 
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script> 
    <script type="text/javascript" src="js/jquery-ui-1.11.1/jquery-ui.js"></script> 
    <script type="text/javascript" src="js/jquery-ui-sliderAccess.js"></script> 
    <script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script> 
    <script type="text/javascript" src="js/jquery-ui-slider-access-addon.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
    $('#slider_example_2').timepicker({ 
     timeFormat: 'HH:mm:ss', 
    }); 
    }); 
    </script> 
    <style> 
    #slider_example_2 
    { 
    width: 150px; 
    } 

    .ui-widget-header 
    { 
    width: 220px; 
    font-size: 12px; 
    color: #102132; 
    background: #D7E5F2; 
    } 

    .ui-timepicker-div dl 
    { 
    width: 230px; 
    font-size: 11.5px; 
    font-weight: bold; 
    } 
    </style> 
</head> 

<body> 
    <input type="text" name="time" id="slider_example_2" value="00:00:00"/> 
</body> 
</html>

以下图片是我的输出：

一切都很好，对我来说，除了以下（在红色矩形中提到）：

如何控制timepicker的宽度？
我试图象下面这样：

(1) 
-ui-widget 
{ 
    width: 200px; 
} 

(2) 
-ui.timepicker 
{ 
    width: 200px; 
}

然而，我不能减少timepicker的宽度。
有人可以帮助我吗？

来源

2017-01-10 Michael Kuan

引用您的脚本，一个好地方，把你的脚本之前，您应该定义你的风格只是身体结束标记之前 –

我复制了你的代码，但是我不能得到你在问题中提到的输出，是否有任何css缺失，所以我们可以找到解决方案？

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-timepicker-addon.min.css"> 
 
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-timepicker-addon.js"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-timepicker-addon.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-sliderAccess.js"></script> 
 
<script src="https://cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-timepicker-addon.js"></script> 
 
<script type="text/javascript"> 
 
    $(document).ready(function(){ 
 
    $('#slider_example_2').timepicker({ 
 
     timeFormat: 'HH:mm:ss', 
 
    }); 
 
    }); 
 
    </script> 
 
    <style> 
 
    #slider_example_2 
 
    { 
 
    width: 150px; 
 
    } 
 

 
    .ui-widget-header 
 
    { 
 
    width: 220px; 
 
    font-size: 12px; 
 
    color: #102132; 
 
    background: #D7E5F2; 
 
    } 
 

 
    .ui-timepicker-div dl 
 
    { 
 
    width: 230px; 
 
    font-size: 11.5px; 
 
    font-weight: bold; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <input type="text" name="time" id="slider_example_2" value="00:00:00"/> 
 
</body> 
 
</html>

来源

2017-01-10 16:32:13 TOH19

设置时间选择器宽度

回答

相关问题