Question

我正在使用innerHTML打印出一些基于所选选项的文本框的div。

当html打印出div时，尽管我在css外部，内部或内联编码，但它们的宽度仍然不变。在firebug中，宽度显示为200px，但在视觉上您可以清楚地看到宽度不适用。在Firefox和Linux中都进行了测试铬...

任何人都可以帮助我吗？这是一个JSFiddle：

使用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>';
    }
}

CSS：

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

Answer 1

在创建html的字符串中，它将宽度指定为标记中的内联百分比。由于这是一种内联样式，因此它将优先于CSS中指定的内容。您需要从HTML字符串中删除style="30%"。

然后将.cell更改为inline-block以使宽度生效。

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

示例 http://jsfiddle.net/HhJhK/1/

重构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>';
   }

}

Answer 2

您需要.cell班级的display: inline-block;

欢呼声

innerHTML不保持宽度 - Javascript / CSS

2 个答案: