Html 让按钮随风伸展全屏_Html_Layout_Tailwind Css

Html 让按钮随风伸展全屏

html layout

Html 让按钮随风伸展全屏,html,layout,tailwind-css,Html,Layout,Tailwind Css,我试图让按钮在屏幕上顺风伸展，但要么它们向左对齐，不向外伸展（大多数情况下），要么——就像代码的当前状态一样，它们似乎从屏幕的右侧伸展出去我肯定我遗漏了一些明显的东西，但看不出是什么。我的页眉和页脚适当地伸展，最初我只是复制它们，但作为按钮s，而不是divs 代码（延伸到屏幕外版本）当前看起来如下所示： <body> ... <div class=""> <div class="block"> <ul class="">

我试图让按钮在屏幕上顺风伸展，但要么它们向左对齐，不向外伸展（大多数情况下），要么——就像代码的当前状态一样，它们似乎从屏幕的右侧伸展出去

我肯定我遗漏了一些明显的东西，但看不出是什么。我的页眉和页脚适当地伸展，最初我只是复制它们，但作为

按钮

s，而不是

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>
...

页脚：

<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>


页脚

您应该使

全宽，因为按钮嵌套在其中，并取其父按钮的宽度，即

li

。添加一个

w-full

类

也可以尝试向按钮添加

块

类

添加

您是否尝试过将w-screen类放在按钮中？TBH，不确定我尝试过什么组合-似乎一切都一样。但我只是试了一下，但没用——它仍然从屏幕向右延伸。恐怕不会改变。我在问题中添加了一些额外的信息，因为唯一能够正确拉伸整个宽度和缩放比例的是附在屏幕底部的页脚。因为某种原因，其他的东西都比这窄！另外，需要提供页脚和页眉

w-screen

。默认情况下，div是一个全宽的块元素。我认为没有必要上那门课。可能会引起一些问题。如果需要，可以使用

w-full

。它在GitHub上，但不是html。它是由Elm生成的，但我复制了它生成的html，以获得最小的可复制示例。当我稍后回到我的电脑时，我会尝试修剪外部div类，看看是否有帮助。如果我删除标题的外部div，我最终会得到一个实际上比页面区域更宽的部分<代码>标题等待-明白了！似乎是

w-full

出于某种原因推动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>