html - 我试图在某些文本上使用 float right 但它拒绝工作

标签 html css css-float

这是一个 nodecg 包,所以请原谅所有看似无用的脚本标签

HTML

<body>
  <div class="main-list">
    <script>
      var type="donation";
      var user="TestUser";
      var amount="$1.00";
      document.write("<div class='list-element' class='" + type + "' >");
      document.write(user);
      document.write("<span class='pull-right'>" + amount + "</span>" + "</div>");
    </script>
  </div>
</body>

CSS

.main-list{
  margin: auto;
  width: 486px;
  color: #ecf0f1;
  font-size: 23px;
  background-color:#494949;
}
.list-element {
  list-style-type: none;
  padding-top: 9px;
  padding-left: 9px;
  height: 39px;
  border-top: 1px solid;
  rgba(125, 125, 125, .5);
  }
.pull-right: {
  float:right;
  margin-right:9px;
}

我知道这是草率的代码,我可以将它合并到一个 document.write 中,但我的问题是我无法获得 pull-right 类来将金额向右移动。

https://jsfiddle.net/b9pzofLx/1/

最佳答案

看这个fiddle

注意 .pull-right: { 在你的 CSS 中

您的 CSS 中有一个 : 用于 pull-right,这在语法上是一个错误,因此没有应用该样式。正确的 CSS 如下所示

CSS

.pull-right {
  float:right;
  margin-right:9px;
}

关于html - 我试图在某些文本上使用 float right 但它拒绝工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35104798/

相关文章:

javascript - Jquery 将不透明度淡化为 100%

html - 使用 CSS 定位按钮

css-float - 图像重叠 DOM 元素边框

html - Css float 第三个元素,其内容取决于宽度

javascript - 使用 jquery 在 HTML 表中追加行不起作用

javascript - 模式不会用转义键关闭

css - 什么是 CSS 的 base 64 字体

javascript - 灯箱图像调整大小错误

html - 我在尝试使用 CSS 垂直对齐 div 时遇到问题

css - 使用 CSS 强制 float column-1 中的超宽元素出现在 float column-2 下方