Как сделать ширину автоматической с абсолютной позицией с помощью CSS

Я использую position:absolute;, теперь я хочу установить ширину автоматически (в соответствии с содержимым), но из-за position:absolute; я не могу width:auto;

$('.wishlistMessage').text('Your product added to wishlist')
                                   $('.wishlistMessage').show();

.wishlistMessage{position: fixed;
   bottom: 25px;
   left: 0;
   right: 0;
   margin-left: auto;
   margin-right: auto;
   background: rgba(0, 0, 0, 0.8);
   color: #fff;
   padding: 12px 25px;
   display: inline;
   width: auto;
   text-align: center;
   border-radius: 5px;
   z-index: 10000;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "wishlistMessage">Your product added to wishlist</div>

Вы показали часть своего кода с фиксированной позицией. Можете ли вы показать соответствующую часть кода?

— 06.10.2018 07:33

html css

06.10.2018 07:29

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Элемент с position: absolute будет соответствовать размеру содержимого. Поскольку вы используете left: 0 и right: 0, элемент растягивается в обе стороны. Удаление одного из них (я удалил правый) решило бы проблему:

$('.wishlistMessage').text('Your product added to wishlist')
$('.wishlistMessage').show();

.wishlistMessage {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 12px 25px;
  text-align: center;
  border-radius: 5px;
  z-index: 10000;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "wishlistMessage">Your product added to wishlist</div>

06.10.2018 07:34

Другие вопросы по теме

Как центрировать текстовое поле по горизонтали и вертикали от нижней границы меню навигации до конца изображения баннера?

Как создать таблицу умножения в JavaScript

Получение плавающего изображения для выравнивания верхнего левого угла

Почему мои элементы сетки CSS перекрываются при размещении в определенном макете?

Высота гибких элементов автоматически уменьшается

Подключение данных json к странице html

Как постоянно менять цвет кнопки в CSS или jQuery

Фантомные пиксели в родительском контейнере в css

Радиус границы между двумя блоками

Поместите поле <input> на png

Как сделать ширину автоматической с абсолютной позицией с помощью CSS

Ответы 1

Другие вопросы по теме

Похожие вопросы