保证金权利不在禁区内运作

Question

我试图将边距设置为文本，但边缘权利似乎并不适用于消息内部。 为什么呢？

的CSS：

  message
  {
  position: fixed;
  display: block;
  margin-bottom: 0px;
  width: 100%;
  height: 40px;
  background-color: rgba(26, 119, 212, 100);
  line-height: 40px;
  font-style: italic;
  text-align: left;
  overflow: hidden;
  }

  .messageotext
  {
  width: 100%;
  margin-right: 0px;
  }

HTML：

  <message><span class="messageotext">prova</span></message>

我希望文本不在屏幕上，以便我可以通过脚本语言从右到左翻译它。

Answer 1

您已提供width:100%且父级为fixed，因此不会生效 如果您移除width:100% span，则会看到margin-right

因此您可以将text-align:right添加到父级，这将显示margin-right的效果，或者您也可以使用float:right

演示 - fiddle

通过添加

删除浏览器默认样式

*{
    margin:0;
    padding:0;
} 

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
}
message {
  position: fixed;
  display: block;
  margin-bottom: 0px;
  width: 100%;
  height: 40px;
  background-color: rgba(26, 119, 212, 100);
  line-height: 40px;
  font-style: italic;
  text-align: left;
  overflow: hidden;
  text-align: right;
}
.messageotext {
  /*  width: 100%;*/
  margin-right: 100px;
}

＆＃13;

<message><span class="messageotext">prova</span>
</message>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用以下代码修改类消息文本：

.messageotext {
    width: 100%;
    position: absolute;
    left: 100%;
}

然后你可以减小left属性的值，从右到左翻译它。

Answer 3

尝试使用float:right

，如果right:0px为position

，您也可以只使用absolute