innerHTML不'；t保持宽度-Javascript/CSS

我正在使用innerHTML打印一些div，其中包含一些基于所选选项的文本框

当html打印出来时，div不会保持其宽度，尽管我在css外部、内部或内联中对其进行了编码。在firebug中，宽度显示为设置为200px，但从视觉上可以清楚地看到宽度不适用。在Firefox和Chrome中测试

有人能帮我吗？下面是一个JSFIDLE：

Javascript:

window.getTickets = function () {

    $amountId = document.getElementById('event_tt').value;

    $x = document.getElementById($amountId).value;

    var div = document.getElementById('booking_area');

    div.innerHTML = '<div style="width:750px;clear:both;"><div class="cell" style="width:30%;">First Name</div><div class="cell" style="width:30%;">Last Name</div><div class="cell" style="width:30%;">Email</div></div>';

    for (var i = 1; i <= $x; i++) {
        div.innerHTML = div.innerHTML + '<div style="width:750px;clear:both;"><div class="cell" style="width:30%;"><input type="text" name="par_fname" id="par_fname"></div><div class="cell" style="width:30%;"><input type="text" name="par_lname" id="par_lname"></div><div class="cell" style="width:30%;"><input type="text" name="par_email" id="par_email"></div></div>';
    }
}

---

在创建html的字符串中，它在标记中以内联百分比的形式指定宽度。由于这是一种内联样式，它将优先于CSS中指定的样式。您需要从HTML字符串中删除

style=“30%”

然后将.cell更改为

内联块

，使宽度生效

.cell{
    width:200px;
    display: inline-block;
    overflow:hidden;
}

示例

重构的JS

window.getTickets = function() {

    $amountId = document.getElementById('event_tt').value;

    $x = document.getElementById($amountId).value;

    var div = document.getElementById('booking_area');

    div.innerHTML = '<div style="width:750px;clear:both;"><div class="cell">First Name</div><div class="cell" >Last Name</div><div class="cell">Email</div></div>';

    for (var i=1;i<=$x;i++){
        div.innerHTML = div.innerHTML + '<div style="width:750px;clear:both;"><div class="cell"><input type="text" name="par_fname" id="par_fname"></div><div class="cell"><input type="text" name="par_lname" id="par_lname"></div><div class="cell"><input type="text" name="par_email" id="par_email"></div></div>';
   }

window.getTickets=function（）{
$amountId=document.getElementById（'event_tt'）。值；
$x=document.getElementById（$amountId）.value；
var div=document.getElementById（'booking_area'）；
div.innerHTML='First name last name'；
对于创建html的字符串中的（var i=1；i，它在标记中指定一个宽度作为内联百分比。由于这是一种内联样式，它将优先于CSS中指定的样式。您需要从html字符串中删除
style=“30%”

然后将.cell更改为
内联块
，使宽度生效

.cell{
    width:200px;
    display: inline-block;
    overflow:hidden;
}

示例

重构的JS

window.getTickets = function() {

    $amountId = document.getElementById('event_tt').value;

    $x = document.getElementById($amountId).value;

    var div = document.getElementById('booking_area');

    div.innerHTML = '<div style="width:750px;clear:both;"><div class="cell">First Name</div><div class="cell" >Last Name</div><div class="cell">Email</div></div>';

    for (var i=1;i<=$x;i++){
        div.innerHTML = div.innerHTML + '<div style="width:750px;clear:both;"><div class="cell"><input type="text" name="par_fname" id="par_fname"></div><div class="cell"><input type="text" name="par_lname" id="par_lname"></div><div class="cell"><input type="text" name="par_email" id="par_email"></div></div>';
   }

window.getTickets=function（）{
$amountId=document.getElementById（'event_tt'）。值；
$x=document.getElementById（$amountId）.value；
var div=document.getElementById（'booking_area'）；
div.innerHTML='First name last name'；
对于（var i=1；i您需要
.cell
类的
显示：内联块；

干杯
您需要
.cell
类的
显示：内联块；

干杯
使用一张桌子，它会让你的生活更美好easier@ama2谢谢你的快速回复，但是桌子实在是太差了，我不想走捷径。当然有办法解决这个问题。我会不惜一切代价避免桌子…使用桌子，它会让你的生活变得更美好easier@ama2谢谢你的快速回复，但是我不介意我不想走捷径。当然有办法解决这个问题。我会不惜一切代价避开桌子…@DavidDawson运气好吗？@DavidDawson很高兴我能帮上忙！@DavidDawson运气好吗？@DavidDawson很高兴我能帮上忙！