AngularJS 应用 CSS 的方式与普通 HTML 不同吗？答案

【问题标题】：AngularJS doesn't apply CSS the same way as regular HTML?AngularJS 应用 CSS 的方式与普通 HTML 不同吗？
【发布时间】：2017-04-30 11:04:22
【问题描述】：

我有以下正确呈现的常规 html：

<div class="media-left">
                      <div class="user-wrapper">
                        <img src="myimage.jpg"  class="img-circle" width="80">
                        <div><a href="#">Some entry</a></div>
                        <div class="date">Now</div>
                      </div>
                    </div>

然后我有另一个 sn-p，它使用控制器以角度 for 循环呈现：

<div class="media-left">
                      <div class="user-wrapper">
                        <img ng-src="myimage.jpg"  class="img-circle" width="80" src="myimage.jpg">
                        <div><a href="#" class="ng-binding">some entry</a></div>
                        <div class="date"></div>
                      </div>
                    </div>

这是我的 CSS：

ul.timeline-list > li.media > .media-left {
  text-align: center;
  position: relative;
  z-index: 2;
}
ul.timeline-list > li.media > .media-left .user-wrapper {
  width: 120px;
}
@media (min-width: 480px) {
  ul.timeline-list > li.media > .media-left {
    margin-left: -20px;
  }
  ul.timeline-list > li.media > .media-left img {
    margin-top: 20px;
  }
}
@media (max-width: 480px) {
  ul.timeline-list > li.media > .media-left {
    left: 50%;
    margin-left: -60px;
    margin-top: 0px !important;
  }
}
ul.timeline-list > li.media > .media-left a {
  background: #ffffff;
  font-weight: bold;
  border: 1px solid #e8e8e8;
  padding: 4px 4px;
  border-radius: 5px;
  margin-top: 5px;
  display: inline-block;
}
ul.timeline-list > li.media > .media-left .date {
  background: #ffffff;
  font-weight: bold;
  padding: 4px;
  border: 1px solid #e8e8e8;
  color: #bdbdbd;
  border-radius: 5px;
  font-size: 12px;
  margin-top: 5px;
  display: inline-block;
}

ul.timeline-list > li.media > .media-left .user-wrapper {
  width: 120px;
}

当我从工作条目中删除“media-left”类时，它看起来就像扭曲的图像。

这是顶部工作和底部未对齐的样子：

我遵循以下@E.King 的建议并补充说：

.container {
  font-size: 0px;
  letter-spacing: 0px;
  word-spacing: 0px;
}

.container > div {
  display: inline-block;
  margin: 0px;
  padding: 0px;
  font-size: 15px;
  letter-spacing: 1em;
  word-spacing: 2em;
}

<div class="media-left container">

现在图标居中对齐，格式更接近，但我怎样才能让图标位于灰色条上方？：

第二个条目的格式失真，我做错了什么？

【问题讨论】：

ng-binding 类是否有任何 CSS 会破坏格式？您的 date div 是否可能无法正确呈现，因为它在第二个示例中为空？很难不知道“扭曲”到底是什么意思。
提供 CSS，也许我们可以告诉你。
@MikeMcCaughan 我添加了 css。当我从工作条目中删除“media-left”类时，它看起来就像扭曲的图像。
您使用 width="80" 而不是 style="width: 80px;" 是否有原因？无论如何，我不会推荐内联样式，但如果您选择这样做，第二个选项会更好。不确定这是否能解决您的问题，但它对我来说很重要。
@Santi 我没有任何 ng 绑定冲突。

标签： javascript html css angularjs

【解决方案1】：

您是否尝试将 !important 添加到 .media-left margin-left？也许在初始渲染后会应用一些进一步的 CSS 并覆盖您设置的边距行为。

这也可能是空格的问题，根据：Angularjs List Item Margin Issue Combining ng-repeat elements with static ones

根据 ng-repeat 的其他问题，看起来您的 CSS 类在元素渲染后根本没有被应用。这在 ng-repeat 中的定位有点常见。您可以尝试直接使用 ng-class 或 ng-style 根据this answer 设置正确的边距和 z-index。

【讨论】：

添加important?没有。只是没有。
@Yatrix 哈哈，当你只有一把锤子的时候。
@Atma “我只是把这个火箭筒放在周围，我需要在墙上钻一个洞，所以......”