Question

我从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，所以如果这是一个愚蠢的问题，请原谅我。

Answer 1

width属性将元素的宽度设置为其包含块宽度的20％，在第一个示例中为body，但div在第二个例子中使用id“testContainer”。

由于testContainer具有固定的位置而没有其他内容，因此它不会有任何宽度。给它一个明确的宽度，它应该做你想要的。

Answer 2

您需要为div＃testcontainer定义宽度。

为什么我不能将jquery-ui进度条放在具有固定位置的div中？

2 个答案: