設置時間選擇器寬度

我正在使用特倫特理查森時間選擇器。（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

設置時間選擇器寬度

回答

相關問題