根据文本长度调整快餐栏消息的大小[重复]
Posted
技术标签:
【中文标题】根据文本长度调整快餐栏消息的大小[重复]【英文标题】：Size snackbar message based on text length [duplicate] 【发布时间】：2021-04-15 23:27:35 【问题描述】：当我的应用程序中有一个成功的补丁或帖子时，我会弹出一条快餐栏消息。根据正在更新的对象的上下文，这些消息有时可能很短或很长。
这最初设置为left: 50%，但我更改了它，因为有时消息方式未正确居中。无论文本有多长，如何使此小吃栏始终居中？
#snackbar
visibility: hidden;
min-width: 250px;
margin-left: -125px;
background-color: $apple;
color: #fff;
text-align: center;
border-radius: 5px;
padding: 16px;
position: fixed;
z-index: 1;
left: 40%;
bottom: 30px;
html如下
<body>
<%= render "shared/sidenav" if current_user %>
<div id=<%= "#'main' if current_user" %>>
<% flash.each do |name, msg| %>
<%= content_tag :div, msg, class: "alert alert-#name", id: 'alert' %>
<% end %>
<%= yield %>
<div id="snackbar"></div>
</div>
</body>
Snackbar 在 HTTP 请求时可见。
【问题讨论】：
您好，请同时发布您的 HTML。还有一些你的 CSS 代码。 【参考方案1】：您可以为此使用left: 50% 和transform: translateX(-50%) 的组合：
#snackbar
position: fixed;
min-width: 250px;
background-color: green;
color: #fff;
text-align: center;
border-radius: 5px;
padding: 16px;
z-index: 1;
left: 50%;
transform: translateX(-50%);
bottom: 30px;
<div id="snackbar">
<p>Eleifend nec eget. Id massa quis eu vitae elit. Bibendum interdum semper. Donec libero duis.</p>
</div>小例子
#snackbar
position: fixed;
min-width: 250px;
background-color: green;
color: #fff;
text-align: center;
border-radius: 5px;
padding: 16px;
z-index: 1;
left: 50%;
transform: translateX(-50%);
bottom: 30px;
<div id="snackbar">
<p>Eleifend nec eget.</p>
</div>left 基于框的左侧。 Translate 是基于框的宽度，因此这实际上将框的左边缘移动到元素父元素的中间，然后将其拉回框宽度的 50%。
【讨论】：
以上是关于根据文本长度调整快餐栏消息的大小[重复]的主要内容，如果未能解决你的问题，请参考以下文章