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%;。