innerHTML 不保持宽度 - Javascript/CSS答案

【问题标题】：innerHTML doesn't hold width - Javascript/CSSinnerHTML 不保持宽度 - Javascript/CSS
【发布时间】：2013-08-14 23:54:56
【问题描述】：

我正在使用 innerHTML 根据所选选项打印出一些带有一些文本框的 div。

当 html 打印出来时，尽管我在外部、内部或内联的 css 中对其进行了编码，但 div 并没有保持它们的宽度。在 firebug 中，显示的宽度设置为 200 像素，但在视觉上您可以清楚地看到宽度没有应用。在 Firefox 和 Chrome 中测试...

谁能帮帮我？这是一个 JSFiddle：

http://jsfiddle.net/HhJhK/

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;
}

【问题讨论】：

用一张桌子，让你的生活更轻松
@ama2 感谢您的快速回复，但表格的使用非常糟糕，我不想采取简单的方法。肯定有办法解决这个问题。我不惜一切代价尽量避免使用桌子......

标签： javascript css width innerhtml

【解决方案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>';
   }

}

【讨论】：

@DavidDawson 运气好吗？
@DavidDawson 很高兴我能帮上忙！

【解决方案2】：

你需要.cell类的display: inline-block;

干杯

【讨论】：