Получение кнопок для растягивания на весь экран с попутным ветром - PullRequest
Новая
       9

Получение кнопок для растягивания на весь экран с попутным ветром

0 голосов
/ 26 марта 2020

Я пытаюсь заставить кнопки растягиваться по экрану попутным ветром, но либо они выровнены по левому краю и не растягиваются (в большинстве случаев), либо - как в текущем состоянии кода, они, кажется, растягиваются правая сторона экрана!

Я уверен, что упускаю что-то очевидное, но не вижу, что это такое. Мой верхний и нижний колонтитулы растягиваются соответствующим образом, и изначально я просто дублировал их, но как button с, а не div с.

Код (версия с растягиванием экрана) в настоящее время выглядит следующим образом: 

<body>
...
<div class="">
    <div class="block">
        <ul class="">
            <li><button class="w-full bg-orange-200 hover:bg-orange-400 rounded-lg mx-6 my-4">
                    <div class="text-black text-lg content-center">
                        <h2 class="font-bold">Mike's big adventure</h2><br>
                        <div class="text-black text-base">Aargh, zombies!</div>
                        <div class="text-gray-600 text-xs">
                            <div>Created: 2020-03-24T12:57:01.753Z</div>
                            <div>Updated: 2020-03-24T13:00:06.411Z</div>
                        </div>
                    </div>
                </button></li>
            ... more list items
        </ul>
    </div>
</div>
...

(Обратите внимание, не думайте, что это имеет значение, но html фактически генерируется Elm SPA)

Как мне нужно вкладывать различные container, w-full, w-screen, button et c. и какой комбо мне нужен, чтобы получить то, что я хочу?

Редактировать: Этот фрагмент не единственное, что не растягивается. Например, ни заголовок страницы. Нижний колонтитул страницы, прикрепленный к нижней части экрана, растягивается до конца ...

Верхний колонтитул: 

<div class="container flex-auto w-screen m-2">
   <div class="w-full content-center bg-orange-500 rounded-lg">
      <h1 class="font-bold text-5xl text-center">Header</h1>
   </div>
</div>

Нижний колонтитул: 

<div class="container flex-auto w-screen mx-2">
   <div class="absolute inset-x-0 bottom-0 bg-orange-500 rounded-lg m-2">
      <div class="m-4">Footer</div>
   </div>
</div>

1 Ответ

0 голосов
/ 03 апреля 2020

Вы должны сделать <li> полной шириной, так как кнопка вложена в нее, и взять ширину ее родителя, которая является li. Добавьте класс w-full.

Возможно также попробуйте добавить класс block к кнопке. Добавить

...