私はこのコードを使用したときにアライメントが

Question

以前は散らかっている開いたときに私のWebページのアライメントは、以前しかしいつか後、エラーなしでテスト。それはかなりよく出てきました。しかし、最近私はそれを開いて、私は全体の整列がちょうど消えたことを知った。それはCSSやHTMLの問題ですか？どのように私はそれを解決すべきですか？これは私のHTMLとCSSのコードです。

echo " <div class='toship-info'> 
         <div class='toship-header'>Deliver to:  
       </div> 
            <div class='toship-content'> 
             <div class='toship-att'>Name :</div> 
             <div class='toship- 
      data'>$ship_name</div> 

             <div class='toship-att'>Address : 
     </div> 
             <div class='toship- 
     data'>$ship_address</div> 

             <div class='toship-att'>Contact No : 
     </div> 
             <div class='toship- 
     data'>$ship_contact</div> 

             <div class='toship-att'>Email : 
     </div> 
             <div class='toship- 
     data'>$ship_email</div> 
             <br><strong>*If there is any 
    inquiries please contact our Apex Store at +6(04)-3901025. </strong> 
      </br> 
            </div> 
           </div> 
          "; 

これはCSSコードです。

.toship-header{ 
background: rgb(63,63,63); 
color: white; 
font-size: 14px; 
font-weight: bold; 
height: 24px; 
line-height: 24px; 
padding-left: 15px; 
} 

.toship-content{ 
background: rgb(238,238,238); 
height: 130px; 
padding-top: 10px; 
} 

.toship-att{ 
width: 100px; 
text-align: right; 
font-size: 12px; 
font-weight: bold; 
float: left; 
padding: 3px; 
box-sizing: border-box; 
} 

.toship-data{ 
width: 500px; 
text-align: left; 
padding: 3px; 
font-weight: bold; 
font-size: 12px; 
float: left; 
box-sizing: border-box; 
} 

Answer 1

htmlコードの "toship-"と "data"の間のスペースを削除してください。

<div class='toship-info'> 
    <div class='toship-header'>Deliver to:</div> 
    <div class='toship-content'> 
     <div class='toship-att'>Name :</div> 
     <div class='toship-data'>$ship_name</div> 
     <div class='toship-att'>Address :</div> 
     <div class='toship-data'>$ship_address</div> 
     <div class='toship-att'>Contact No :</div> 
     <div class='toship-data'>$ship_contact</div> 
     <div class='toship-att'>Email :</div> 
     <div class='toship-data'>$ship_email</div> 
     <br> 
     <strong>*If there is any inquiries please contact our Apex Store at +6(04)-3901025.</strong> 
     </br> 
    </div> 
</div> 

Answer 2

あなたの問題は、テキストの整列です： は.toshipデータから削除 フィドルFiddle

.toship-header{ 
    background: rgb(63,63,63); 
    color: white; 
    font-size: 14px; 
    font-weight: bold; 
    height: 24px; 
    line-height: 24px; 
    padding-left: 15px; 
    } 

    .toship-content{ 
    background: rgb(238,238,238); 
    height: 130px; 
    padding-top: 10px; 
    } 
    .toship-data{ 
    width: 500px; 
    padding: 3px; 
    font-weight: bold; 
    font-size: 12px; 
    float:left; 
    box-sizing: border-box; 
    } 

    .toship-att{ 
    width: 100px; 
    text-align: right; 
    font-size: 12px; 
    font-weight: bold; 
    padding: 3px; 
    float:left; 
    box-sizing: border-box; 
    }