【问题标题】：CSS percentage width is not workingCSS百分比宽度不起作用
【发布时间】：2015-09-29 01:51:32
【问题描述】：

我在使用 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

【问题讨论】：

当我向下滚动时，表单会跳舞：P 这是正常行为吗？
能否请您用图片更详细一些，以便我们更容易理解
当我尝试时百分比宽度看起来工作正常
嗨，你不需要一直走到最后。只需查看第二个表格。如果您可以在 vew 源代码中看到我已将宽度写为 50%，但如果您检查元素，它会显示为 50 像素

标签： html css width percentage

【解决方案1】：

问题可能是某些未指定的百分比。 0 的 10% 等于 0。因此，1000px 的 10% = 100px。如果你以像素为单位写出高度，你就是在赋予一个大小。

您可能还需要设置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%; 的语法错误。

【讨论】：

嗨，宽度：50%;** 是我的拼写错误或格式错误。但是我尝试使用位置：相对。它不工作