CSS百分比宽度不起作用

Question

我在使用CSS宽度属性时出现奇怪的问题。

<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的10％等于0.所以这样1000px = 100px的10％。如果以像素为单位书写高度，则您将分配一个大小。

您可能需要，以及使位置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> 

不要忘记删除语法错误，你有width: 50%;。