使用javascript创建的div未对齐

我有一个小事件列表和一个添加事件的按钮

其思想是，该按钮将新事件附加到页面。我的问题是，添加到页面的新事件没有右边空白，因此这些事件与其他事件不一致

函数addEvent（）{
var iDiv=document.createElement（'div'）；
iDiv.innerHTML=“Nome:Sampa 6a edição中的前面
\
数据：2017年1月7日
\
霍拉里奥：8:00-19:00
\
当地：蒂特罗马克苏德广场酒店：R.São Carlos do Pinhal，424-圣保罗贝拉维斯塔
\
组织机构：在桑巴前线
\
Foto:Alguma Foto”；
iDiv.className=“事件”；
document.getElementsByClassName（'container'）[0].appendChild（iDiv）；
}

.container{
宽度：90%；
背景色：#f0；
保证金：0自动；
}
.事件{
宽度：20%；
显示：内联块；
最小高度：30%；
保证金：自动；
边缘底部：5px；
边框：2件黑色双人；
填充：2%；
}
钮扣{
宽度：100%；
背景色：#4CAFA1；
颜色：白色；
字体大小：16px；
}

添加新事件

Nome:Sampa 6a edição前方数据：2017年1月7日Horário:8:00-19:00
当地：Teatro hotel do Maksoud Plaza:R.São Carlos do Pinhal，424-Bela Vista，圣保罗
组织机构：Sampa前方
Foto:Alguma Foto
Nome:Sampa 6a edição前方数据：2017年1月7日Horário:8:00-19:00
当地：Teatro hotel do Maksoud Plaza:R.São Carlos do Pinhal，424-Bela Vista，圣保罗
组织机构：Sampa前方
Foto:Alguma Foto
Nome:Sampa 6a edição前方数据：2017年1月7日Horário:8:00-19:00
当地：Teatro hotel do Maksoud Plaza:R.São Carlos do Pinhal，424-Bela Vista，圣保罗
组织机构：Sampa前方
Foto:Alguma Foto
Nome:Sampa 6a edição前线数据：2017年1月7日Horário:8:00-19:00
当地：Teatro hot el do Maksoud广场：R.São Carlos do Pinhal，424-圣保罗贝拉维斯塔
组织：Sampa前线
Foto:Alguma Foto
Nome:Sampa 6a edição前方数据：2017年1月7日Horário:8:00-19:00
当地：Teatro hotel do Maksoud Plaza:R.São Carlos do Pinhal，424-Bela Vista，圣保罗
组织机构：Sampa前方
Foto:Alguma Foto
Nome:Sampa 6a edição前方数据：2017年1月7日Horário:8:00-19:00
当地：Teatro hotel do Maksoud Plaza:R.São Carlos do Pinhal，424-Bela Vista，圣保罗
组织机构：Sampa前方
Foto:Alguma Foto
Nome:Sampa 6a edição前方数据：2017年1月7日Horário:8:00-19:00
当地：Teatro hotel do Maksoud Plaza:R.São Carlos do Pinhal，424-Bela Vista，圣保罗
组织机构：Sampa前方
Foto:Alguma Foto
Nome:Sampa 6a edição前方数据：2017年1月7日Horário:8:00-19:00
当地：Teatro hotel do Maksoud Plaza:R.São Carlos do Pinhal，424-Bela Vista，圣保罗
组织机构：Sampa前方
Foto:Alguma Foto
Nome:Sampa 6a edição前方数据：2017年1月7日Horário:8:00-19:00
当地：Teatro hotel do Maksoud Plaza:R.São Carlos do Pinhal，424-Bela Vista，圣保罗
组织机构：Sampa前方
Foto:Alguma Foto

删除页边距：自动；再加上右边的边距：3px；那就行了。

删除边距：自动；再加上右边的边距：3px；这将起作用。

这是由于显示：内联块造成的

这是你能做的

1） 删除显示：内联块

2） 添加浮动：改为左

3） 添加左边距：3倍（如果希望获得相同的效果）

注意：不要忘了在所有div被追加后添加以下行，以清除div的浮动

<div style="clear:both"></div>

---

这是由于显示：内联块导致的

这是你能做的

1） 删除显示：内联块

2） 添加浮动：改为左

3） 添加左边距：3倍（如果希望获得相同的效果）

注意：不要忘了在所有div被追加后添加以下行，以清除div的浮动

<div style="clear:both"></div>

由于代码中有空格，JavaScript队列中没有添加div这一事实纯属侥幸。margin auto 0；可能会导致对齐问题。。使用margin/padding由于代码中的空白，JavaScript队列中没有添加div这一事实是一种侥幸。margin auto 0；可能会导致对齐问题。。使用cssin中的保证金/补仓事件cssin中的保证金/补仓事件不支持清算div。现在是2017年，有比添加无关的标记更合适的解决方案。没错，但这只是我给出的解决方案的一部分。我不想在修复现有问题时创建新问题。FWIW，使用clearfix不会创建新问题。没关系，这是你解决问题的一部分，只是约会而已。不喜欢清理div。现在是2017年，有比添加无关的标记更合适的解决方案。没错，但这只是我给出的解决方案的一部分。我不想在修复现有问题时创建新问题。FWIW，使用clearfix不会创建新问题。这是你解决方案的一部分没关系，只是约会而已。