a tag 遺失 block 屬性


在重構程式的時候把一個 a 標籤放進 section 裡面,結果樣式就壞掉了,不但 border 跑掉,背景色也不見了。
試了一下似乎問題是 a tag 裡面遺失 block 屬性,補上 block 就沒事了。

本來想就這樣結案繼續去趕工,但以後應該也不會記得要回來查這個。為了我的複利效應只好先暫停手邊工作。

發現是 a tag 原本在外面 div 有下 flex flex-col,移到 section 裡面只有預設的 block,因此我的 a tag 拿到的屬性就從 block 變成 inline。

我猜是醬。

<div class="flex flex-col"> 

    {{-- 最新活動 --}}
    <div>
        <div class="relative flex">
            <x-decorations.title_royalblue_textcenter blue="" black="最新活動" />
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"> <!-- grid -->
@foreach( $Data['ontime']['data'] as $key => $data )
            <x-cards.event :data="$data" />
@endforeach
        </div>
        <!-- 移動後 -->
        <a class="my-12   border-2 border-royalBlue border-opacity-25 font-bold  text-royalBlue  hover:text-white hover:bg-royalBlue "
            href="{{route('event_list',['page'=>1])}}">
            <div class="flex justify-center">
                <span class=" py-1 ">看更多 +</span>
            </div>
        </a>
    </div>

    <!-- 原本 -->
    <a class="my-12   border-2 border-royalBlue border-opacity-25 font-bold  text-royalBlue  hover:text-white hover:bg-royalBlue "
        href="{{route('event_list',['page'=>1])}}">
        <div class="flex justify-center">
            <span class=" py-1 ">看更多 +</span>
        </div>
    </a>
</div>







你可能感興趣的文章

物件傳值 與 物件傳參考

物件傳值 與 物件傳參考

CSS 預處理器-SCSS, Sass

CSS 預處理器-SCSS, Sass

Web開發學習筆記12 — 如何用JavaScript設置CSS樣式?、document.style與window.getComputedStyle()的差異

Web開發學習筆記12 — 如何用JavaScript設置CSS樣式?、document.style與window.getComputedStyle()的差異






留言討論