CSS百分比宽度不起作用

Question

使用CSS width属性时遇到了一个奇怪的问题。

 <form action="#form2"  method="post" id="form1" name="form1">
  <ul id="flx-skill" style="display:inline;">                               
                     <li class="clearfix"><p class="span4" style="font-size:17px; color:black; text-shadow: 0px 0px 5px grey;"><b>1. Personal </b></p><p class="span4">2.  Medical</p><p class="span4">3. Lifestyle</p><p class="span4">4. Diet</p>
                                    <div class="progress-bar green animate" style="width:100%;">
                                        <span class="progress-60" style="width: 25%">
                                                <span></span>

这似乎适用于宽度为25％。但是当我输入50％的宽度时，换另一种形式。它不起作用，而是取50px。

<ul id="flx-skill" style="display:inline;">                             
                     <li class="clearfix"><p class="span4" style="font-size:17px; color:black; text-shadow: 0px 0px 5px grey;"><b>1. Personal </b></p><p class="span4">2.  Medical</p><p class="span4">3. Lifestyle</p><p class="span4">4. Diet</p>
                                    <div class="progress-bar green animate" style="width:100%;">
                                        <span class="progress-60" style="width: 50%;">
                                            <span></span>

请让我知道我哪里出错了。这是link

Answer 1

问题可能是未指明的事物的百分比。 0的0％等于0.因此，10％的1000px = 100px。如果你以像素为单位写出高度，那么你就是一个大小。

您可能还需要制作职位P'，然后relative和width:100%应该有效：

您的第一个例子

width: 50%;

第二个例子

<form action="#form2"  method="post" id="form1" name="form1">
  <ul id="flx-skill" style="display:inline;">                               
                     <li class="clearfix"><p class="span4" style="font-size:17px; color:black; text-shadow: 0px 0px 5px grey;"><b>1. Personal </b></p><p class="span4">2.  Medical</p><p class="span4">3. Lifestyle</p><p class="span4">4. Diet</p>
                                    <div class="progress-bar green animate" style="width:100%; position: relative">
                                        <span class="progress-60" style="width: 25%; position: relative">
                                                <span></span>

不要忘记删除<ul id="flx-skill" style="display:inline;"> <li class="clearfix"><p class="span4" style="font-size:17px; color:black; text-shadow: 0px 0px 5px grey;"><b>1. Personal </b></p><p class="span4">2. Medical</p><p class="span4">3. Lifestyle</p><p class="span4">4. Diet</p> <div class="progress-bar green animate" style="width:100%; position: relative"> <span class="progress-60" **style="width: 50%;** position: relative"> <span></span> 。

中的语法错误