我想在我的Web应用程序中创建一个消息警报框。我创建了主要样式,但在小屏幕尺寸上遇到了问题。

这是常规1366x768计算机屏幕的图像:
html - CSS顶部的消息框-LMLPHP

这是典型的移动设备:

html - CSS顶部的消息框-LMLPHP

问题:


X按钮已标记消息。
当邮件从包装器出来时,主邮件包装器已经修复,并且没有展开。


如何解决以上两个问题?我必须走另一条路吗?我使用position: fixed;属性值将消息保持在最前面。

这是我的HTMl和CSS代码:

HTML:

    <div class="top-msg">
        <div class="top-msg-ico">
            !
        </div>
        <div class="top-msg-inner">
            <p>Only letters and nubers are allowed for email. See <a href="#">security</a> for more info.</p>
        </div>
        <div class="top-msg-close" style="  cursor: pointer;">&#10005;</div>
    </div>


CSS:

.top-msg {
  width: 100%;
  height: 55px;
  position: fixed;
  background-color: rgba(42,45,50,0.6);
  color: rgba(250,251,255,0.95);
  font-family: "Lato", sans-serif;
  font-size: 18px;


}

.top-msg-close {
  float: right;
  padding-top: 17px;
  padding-right: 30px;
  //border: 1px solid white;
  //height: 100%;
  width: 3%;

}

.top-msg-inner {
  top: 15px;
  position: absolute;
  display: inline-block;
  padding-left: 10px;
  width: 80%;
  //border: 1px solid white;


}

.top-msg-ico {
  min-width: 65px;
  height: 100%;
  background-color: #fff;
  display: inline-block;
  background-color: rgba(0,0,0,0.7);
  text-align: center;
  font-size: 45px;
}


小提琴:
https://jsfiddle.net/4oLvyajo/

更新-解决方案!-

LGSon答案的帮助下,我设法完成了所有设计,因此我接受了他的答案,但下面的小提琴是空洞的解决方案。

小提琴:
https://jsfiddle.net/4oLvyajo/4/

图片:

html - CSS顶部的消息框-LMLPHP

html - CSS顶部的消息框-LMLPHP

最佳答案

这是您的起点



.top-msg {
  width: 100%;
  position: fixed;
  background-color: rgba(42,45,50,0.6);
  color: rgba(250,251,255,0.95);
  font-family: "Lato", sans-serif;
  font-size: 18px;
}
.top-msg-close {
  float: left;
  box-sizing: border-box;
  padding-top: 17px;
  padding-right: 30px;
  width: 45px;
}

.top-msg-inner a {
  text-decoration: none;
  color: RGBA(0, 0, 0, 0.6);
  font-weight: bold;
}

.top-msg-inner a:hover {
  color: RGBA(0, 0, 0, 0.5);
}

.top-msg-inner {
  float: left;
  box-sizing: border-box;
  padding: 0 10px;
  width: calc(100% - 110px);
}
.top-msg-ico {
  float: left;
  width: 65px;
  height: 57px;
  background-color: #fff;
  background-color: rgba(0,0,0,0.7);
  text-align: center;
  font-size: 45px;
}

<div class="top-msg">
  <div class="top-msg-ico">
    !
  </div>
  <div class="top-msg-inner">
    <p>Only letters and nubers are allowed for email. See <a href="#">security</a> for more info.</p>
  </div>
  <div class="top-msg-close" style="cursor: pointer;">&#10005;</div>
</div>

10-06 10:09
查看更多