Cách canh chỉnh hình ảnh trong css

hoanganh1 · August 6, 2017, 2:01am

Mình có đoạn code như sau:

<!doctype html>
<html>
<head>
    <title>Trang Định dạng trang web</title>
    <style>
        *{
            /*border:solid;*/
        }
        h1 {
            color: #ff006e;
            text-align: center;
        }

        #sampleImage {
            border: solid;
            float:left;
        }

        .li_Tittle {
            color: #ffffff;
            font-weight: bold;
            background-color: #ff006e;
        }
       
        
        #footer {
            font-weight: bolder;
            background-color: #f1cbec;
            text-align: right;
        }
        #f1 {
            color: #b200ff;
        }
        #f2 {
            color: #0026ff;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <h1>Công ty Hoa tươi Nhân Ái</h1>

    <p id="sampleImage"> <img src="image/2.png" alt="Alternate Text" /></p>

    <ol>
        <li>
            <span class="li_Tittle">Giới thiệu</span>
            <ul style="list-style: square;">
                <li >Thành lập ngày 25/05/2007</li>
                <li >Chuyên cung cấp các loại hoa tươi</li>
                <li >Có trên 20 cửa hàng bán lẻ tại TP.HCM</li>
                <li >Nhận kết giỏ hoa theo yêu cầu khách hàng</li>
            </ul>
            <hr />
        </li>

        <li>
            <span class="li_Tittle">Liên hệ &nbsp;&nbsp;&nbsp;&nbsp;</span>
            <ul style="list-style:circle">
                <li>Điện thoại: 84-08-8351056</li>
                <li>Địa chỉ:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<em>227 Nguyễn Văn Cừ, Quận 5, TP.HCM</em></li>
            </ul>
        </li>
    </ol>

    <p id="footer">
        <span id="f1">&copy; Copyright:</span>
        <span id="f2">Trung tâm Tin Học - Đại Học Khoa Học Tự Nhiên TP.HCM</span>
    </p>
    
</body>
</html>

Kết quả:

Mọi người cho em hỏi là làm sao để:

Các Bullets nó không chồng lên hình ảnh.
Nội dung của ul cấp 2 nó phải thụt đầu dòng vô so với ul cấp 1

huynhtinh · August 6, 2017, 2:44am

Tạo 2 div: 1 div chứa hình ảnh, 1 div chứa thông tin nói trên
sử dụng attribute padding-left cho thẻ ul

hoanganh1 · August 6, 2017, 2:44am

Okie Cảm ơn bạn nhiều.

Zarbie · August 6, 2017, 6:53am

Không liên quan đến câu hỏi của bạn nhưng cụm từ “Điện thoại” với “Địa chỉ” thì thôi bỏ luôn vào trong 1 thẻ span, rồi định bề rộng. Chỉnh thẳng cái bụp, vậy cho nó khỏe thân chứ viết khoảng cách “&nbsp” để canh cho ngay thì tỉ mỉ, lặt vặt quá.