2013-07-08 40 views
14

Câu hỏi đầu tiên, tôi bắt đầu làm việc trên CSS khoảng một tháng trước do công việc tôi nhận được, nhưng có vẻ như tôi đã gặp phải một số vấn đề mà tôi không thể khắc phục được (chủ yếu là do sự thiếu kinh nghiệm của tôi và CSS của người khác)Nội dung của người mới bắt đầu: Làm cách nào để ngăn chặn các 'Divs CSS' trùng lặp?

Tôi sẽ không đánh bại nhiều bụi cây và giải thích vấn đề trước khi hiển thị mã. Có một tập hợp Div trong một thiết lập giống như hình thức, nhưng khi văn bản nhận được quá đông đúc nó xâm nhập Div tiếp theo như vậy, sửa chữa nó thông qua CSS và không HTML, bất kỳ sửa chữa về điều này? Từ chính vấn đề này, tôi có thể tưởng tượng nó là một thứ rất dễ dàng, nhưng thật tuyệt, đúng vậy.

Chỉnh sửa: Tôi không quên đề cập đến phần đó, tôi không muốn chúng bị ẩn, tôi muốn mỗi div tự động cho phép "trước" kết thúc nó tập trung mà không chồng chéo (Đã thử với tràn: Tự động nhưng nó đã cho họ cuộn, cho tất cả các hình thức trong toàn bộ trang web.

Dưới đây là một pic của nó trông như thế vào lúc này, tôi chắc chắn bạn sẽ thấy những vấn đề ngay lập tức

http://imgur.com/aj8pDaO


Đây là HTML có liên quan

<html> 
<head> 
    <link href="hue.css" rel="stylesheet"> 
</head> 
<body> 
    <div class="content"> 

     <div class="column"> 
      <div class="form"> 
       <div class="form-nivel"> 
        <label for="cfdiCreate:organizationRfc">RFC</label><label id="cfdiCreate:organizationRfc">XXXXXXXXXXXX</label> 
       </div> 
       <div class="form-nivel"> 
        <label for="cfdiCreate:organizationTaxSystem">Regimen fiscal</label><label id="cfdiCreate:organizationTaxSystem">Sueldos y salarios</label> 
       </div> 
       <div class="form-nivel"> 
        <label for="cfdiCreate:organizationTaxAddress">Domicilio fiscal</label><label id="cfdiCreate:organizationTaxAddress">XXXXXX Colonia Tecnológico Monterrey,Nuevo León,México.C.P.XXXXXX</label> 
       </div> 
       <div class="form-nivel"> 
        <label for="cfdiCreate:organizationExpeditionPlace">Lugar de expedición</label><label id="cfdiCreate:organizationExpeditionPlace">Suc.1 Chiapas,México.  </label> 
       </div> 
      </div> 
     </div> 
     <div class="column secondary"> 
      <!--?xml version="1.0" encoding="UTF-8"?--> 
     </div> 
</body> 
</html> 

Và đây là CSS

body { 
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
    text-align: center; 
} 

p { 
    text-align: left; 
} 

.content { 
    display: block; 
    width: 100%; 
    height: auto; 
    margin-bottom: 10px; 
    float: left; 
    background: #; 
    text-align: left; 
} 

    .content label, .content p { 
     font-size: 16px; 
     color: #024DA1; 
     padding-left: 2%; 
    } 

.column { 
    display: block; 
    float: left; 
    width: 48%; 
    margin-top: 15px; 
    height: auto; 
    background:; 
} 

.secondary { 
    margin-left: 10px; 
} 

.clearfix { 
    clear: both; 
    margin-bottom: 10px; 
} 

.form { 
    display: block; 
    width: 96%; 
    height: auto; 
    background:; 
} 

.form-nivel { 
    display: block; 
    width: 100%; 
    width: 470px; 
    min-height: 20px; 
    margin-bottom: 20px; 
    position: relative; 
} 

    .form-nivel label { 
     width: 160px; 
     float: left; 
     height: 20px; 
     line-height: 20px; 
     margin-right: 10px; 
     text-align: right; 
    } 
+1

Bạn đang tìm giải pháp nào? Bạn có muốn ẩn văn bản thừa không? Bạn có muốn nó quấn? Bạn đang mong đợi cái gì khác? –

+0

Tôi đã quên đề cập đến phần đó, tôi không muốn chúng bị ẩn, tôi muốn mỗi div tự động cho phép "trước" kết thúc nó tập trung mà không chồng chéo (Đã thử với tràn: Tự động nhưng nó đã cho chúng thanh cuộn – Xionico

Trả lời

8

Ở đây. Bạn đang áp dụng quy tắc CSS cho tất cả các nhãn. Sự chồng chéo xảy ra vì quy tắc này.

float: left; 

Để khắc phục điều này, hãy xóa quy tắc nhãn .form-nivel và thêm chúng.

.form-nivel label:nth-child(1) { 
    width: 160px; 
    float: left; 
    height: 20px; 
    line-height: 20px; 
    margin-right: 10px; 
    text-align: right; 
} 

.form-nivel label:nth-child(2) { 
    width: 160px; 
    height: 20px; 
    line-height: 20px; 
    margin-right: 10px; 
    text-align: right; 
} 
+0

Lý do cho con thứ n là vì tôi cho rằng bạn đang lắp ráp thông tin này dưới dạng định dạng cột Điều này sẽ làm e chắc chắn rằng bất kỳ mục nào khác phản ánh cột/bảng này như tự nhiên. ** Tôi khuyên bạn nên sử dụng các bảng trong tương lai. –

+0

Giải pháp của bạn có vẻ là người làm việc tốt nhất, và vâng, tôi là một người mới ở đây và trên hết, nó thậm chí không phải là mã của riêng tôi (họ đã gửi nó cho tôi để sửa nó ...), Tôi đang gặp một số vấn đề, tôi sẽ thực sự cố gắng thực hiện nó trong một cái bàn. Hiện tại, văn bản dường như được tự định dạng sau khi thay đổi điều đó, nhưng vấn đề nằm ở dòng thứ ba, dòng thứ hai của thông tin Địa chỉ bắt đầu ở bên trái màn hình, biết bất kỳ cách nào để căn chỉnh nó đến vị trí dòng đầu tiên bắt đầu? – Xionico

+0

Thử làm lại nó dưới dạng bảng. Bảng sẽ giúp giải quyết vấn đề căn chỉnh. Nếu không, hãy cho tôi biết. Heres một liên kết trên các bảng cơ bản trong HTML. http://www.w3schools.com/html/html_tables.asp –

0

bạn có thể sử dụng overflow: hidden để ẩn nội dung nếu nó tràn vào một

+0

Tôi đã quên đề cập đến phần đó, tôi không muốn chúng bị ẩn, tôi muốn mỗi div tự động cho phép "trước" để hoàn thành nó tập trung mà không chồng chéo (Cố gắng với tràn: Tự động nhưng nó đã cho họ thanh cuộn, cho tất cả các hình thức trong toàn bộ trang web – Xionico

1

Logic CSS tiếp theo cho các nhãn trái và các nhãn đúng giống nhau.

Điều đầu tiên bạn nên làm là đặt chúng ra xa nhau.

<div class="form-nivel"> 
    <label class="leftLabel" for="cfdiCreate:organizationRfc">RFC</label> 
    <label class="rightLabel" id="cfdiCreate:organizationRfc">XXXXXXXXXXXX</label> 
</div> 
  • Thông báo lớp bổ sung

Sau đó vào css của bạn, bạn sẽ làm điều gì đó như thế này:

.form-nivel label.leftLabel { 
    width: 160px; 
    float: left; 
    height: 20px; 
    line-height: 20px; 
    margin-right: 10px; 
    text-align: right; 
} 

.form-nivel label.rightLabel { 
    width: 400px; 
    float: left; 
    height: 20px; 
    line-height: 20px; 
    margin-right: 10px; 
    text-align: left; 
} 

tôi đã thực hiện các nhãn đúng lớn hơn và liên kết chúng sang bên trái.

Ngoài ra, bạn nên thêm:

<meta charset="utf-8"> 

trên đầu html. Điều này là để có thể hiển thị các ký tự có dấu trọng âm.

+0

Cảm ơn lời khuyên! Ngay bây giờ tôi đang thử phương pháp này là tốt, nhưng dường như không có nhiều sự khác biệt sau khi chia chúng trong các nhãn trái và phải (một vấn đề ở phía bên phải của tôi, tôi chắc chắn), và có, chỉ cần thêm bộ ký tự meta, làm việc kỳ diệu! – Xionico

0

Tại sao không chỉ giữ nội tuyến của bạn <label/>? Loại bỏ tất cả các tờ khai không cần thiết ...

.form-nivel label { 
    margin-right: 10px; 
    line-height: 20px; 
} 
0

Hãy thử thêm:

<div class="clearfix"></div> 

giữa mỗi hàng.

<div class="form-nivel"> 
    <label for="cfdiCreate:organizationRfc">RFC</label> 
    <label  id="cfdiCreate:organizationRfc">XXXXXXXXXXXX</label> 
</div> 
<div class="clearfix"></div> 
<div class="form-nivel"> 
    <label for="cfdiCreate:organizationTaxSystem">Regimen fiscal</label> 
    <label id="cfdiCreate:organizationTaxSystem">Sueldos y salarios</label> 
</div> 
Các vấn đề liên quan