我从 this progressbar example 开始源代码，它工作正常。我唯一的改变是将进度条的宽度设置为“20%”。
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#progressbar").progressbar({ value: 37 }).css({ width : "20%"});
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="progressbar"></div>
</body>
</html>
然后我将进度条放在另一个 div 中，并使用 css 将该 div 固定在右上角。
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
#testContainer {
position : fixed;
top : 6;
right : 6;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#progressbar").progressbar({ value: 37 }).css({ width : "20%"});
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="testContainer">
<div id="progressbar"></div>
</div>
</body>
</html>
进度条变成屏幕左侧的一条细长垂直线。我究竟做错了什么？一般来说，我是 web 开发的新手，尤其是 jquery，所以如果这是一个愚蠢的问题，请原谅我。
最佳答案
width 属性将元素的宽度设置为其包含 block 宽度的 20%，即第一个示例中的 body但在第二个示例中，div 的 id 为“testContainer”。
因为testContainer有一个固定的位置，没有其他内容，所以它不会有任何宽度。给它一个明确的宽度，它应该做你想做的。
关于jquery - 为什么我不能将 jquery-ui 进度条放在固定位置的 div 中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2931093/