Canh giữa Center tag ul li list với width chiều rộng của thẻ div trên web

Thảo luận trong 'Ngôn ngữ lập trình CSS, HTML, HTML5' bắt đầu bởi seolagi, 4/7/21.

  1. seolagi

    seolagi

    Moderator

    Thành viên BQT

    Tham gia ngày:
    16/4/14
    Bài viết:
    812
    Đã được thích:
    70
    Điểm thành tích:
    28
    Bạn nào giúp mình với, mình có cái menu footer ở dưới, nó đang nằm dài xuống từng dòng thế này, giờ mình muốn các thẻ tag ul li nó canh giữa ra giống hình dưới, nằm trên cùng 1 hàng thì như thế nào vậy?

    Cái hình và code html mình để dưới, bạn nào nhìn vào cho mình đoạn code css nhúng vào web với, cảm ơn nhiều

    canh-giua-the-ul-li-nhu-the-nao.jpg

    Mình muốn nó canh ngang và nằm giữa ra tựa tựa hình menu của itseovn mà nó thêm cái canh giữa nữa

    center-ul-li.png

    Code HTML của mình, bạn nào giúp mình với
    Mã:
    <div class="menu-footer-dt">
        <ul id="menu-footer" class="menu">
            <li><a href="https://lovemama.vn/ga-chong-tham">Ga chống thấm</a></li>
            <li><a href="https://lovemama.vn/muc/chinh-sach-bao-hanh-hoac-doi-tra-hang">Chính sách đổi trả hàng</a></li>
            <li><a href="https://lovemama.vn/muc/chinh-sach-bao-mat">Chính sách bảo mật</a></li>
            <li><a href="https://lovemama.vn/muc/phuong-thuc-giao-hang-va-thanh-toan">Chính sách giao nhận, chuyển hàng</a></li>
        </ul>
    </div>
    
     
    Cảm ơn đã xem bài:

    Canh giữa Center tag ul li list với width chiều rộng của thẻ div trên web

    Last edited by a moderator: 17/7/21
  2. admin

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    4,485
    Đã được thích:
    1,078
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Bạn add đoạn code css sau vào web nó sẽ canh giữa và canh theo ý bạn được ngay nhé

    Mã:
    .menu-footer-dt
    {
      background-color: #ed5b30;
      margin: 0px auto;
      width: auto;
      text-align: center;
    }
    .menu-footer-dt ul {
      list-style: none;
      padding: 0px;
      width: auto;
    }
    .menu-footer-dt ul li {
      display: inline-block;
      padding: 10px;
      font-size: 14px;
      border-radius: 10%;
    }
     
    Chỉnh sửa cuối: 17/7/21
    seolagi thích bài này.


Like và Share ủng hộ ITSEOVN