1. 首頁
  2. 問答
  3. 顯示一些div內聯

顯示一些div內聯

2012-11-07 69 views
1

我無法在我的某個網站上顯示一些HTML內聯。有幾個我想要內聯的方格。我試過在css中使用display: inline;，但它沒有辦法。顯示一些div內聯

這是它的樣子： The divs that are not inline

我想有兩個一排，這些廣場，所以我可以有每行有兩個正方形。

這是HTML：

<!DOCTYPE html> 
<html> 
<head> 
<link type="text/css" rel="stylesheet" href="./style/stylesheet.css" /> 
<link rel="icon" href="./style/images/favicon.png" type="image/x-icon"> 
<title>Bylmeti - Hyrja</title> 
</head> 
<body> 
<div id="bylmeti"> 
    <div id="langs"> 
     <span class="small"><a href="index.php?lang=sq" id="lang_sq">SHQIP</a> | <a href="index.php?lang=en" id="lang_en">ENGLISH</a></span> 
    </div> 

    <br /><br /> <br /><br /> <br /><br /> <br /> 

    <div id="top"> 
     <a href="index.php"><img src="style/images/logo_.gif" alt="Logo" id="logo" /></a> 

     <ul id="menu"> 
      <li><a href="#produktet" id="produktet">Produktet</a></li> 
      <li><a href="#kompania" id="kompania">Kompania</a></li> 
      <li><a href="#referencat" id="referencat">Referencat</a></li> 
      <li><a href="#blogu" id="blogu">Blogu</a></li> 
      <li><a href="#kontakti" id="kontakti">Kontakti</a></li> 
     </ul> 
    </div> 

    <br /> 

    <div id="main_page"> 
     <div id="slide"> 
      slide here 
     </div> 

     <h1>Bylmeti</h1> 
     <span>Kompania &quot;Bylmeti&quot; me seli në fshatin Miradi e Epërme komuna e Fushë Kosovës, është ndërmarrje private e themeluar me kapital privat në vitin 1996. Veprimataria primare e kësaj ndërmarrje është: Grumbullimi i qumështit të freskët, përpunimi i qumështit dhe distribuimi i prodhimeve nga qumështi, ndërsa si veprimtari të dytë ka tregtimin dhe e prodhimeve ushqimore.</span> 
    </div> 

    <div id="products_page" class="hidden" style="width: 600px"> 
     <br /> 
     <div class="single_cat"> 
      <div class="product_cat"><br /><br /><img src="style/images/jogurtat.gif" alt="Jogurt" /></div> 
      <a href="?products=yoghurts"><img src="style/images/read_more.gif" alt="readmore" /></a> 
     </div> 

     <div class="single_cat"> 
      <div class="product_cat"><br /><br /><img src="style/images/jogurtat.gif" alt="Jogurt" /></div> 
      <a href="?products=yoghurts"><img src="style/images/read_more.gif" alt="readmore" /></a> 
     </div> 
    </div> 

    <div id="refs_page" class="hidden"> 

    </div> 

    <div id="company_page" class="hidden"> 
     <div class="content_nopadding"> 
      <h1>Historiku i kompanisë</h1> 
      <span>some text.</span> 
     </div> 

     <br /> 
    </div> 

    <div id="contact_page" class="hidden"> 
     <div class="content"> 
      <form action="" method="post"> 
      <table width="100%"> 
       <thead> 
       <tr> 
        <th align="left">Forma e kontaktit</th> 
        <th align="left" style="padding-left: 10px; border-left: 1px solid #CCC;">Informata</th> 
       </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <td width="60%"> 
          <table> 
           <tr> 
            <td>Emri:</td> 
            <td><input type="text" name="emri" maxlength="255" required="required" value="" /></td> 
           </tr> 
           <tr> 
            <td>E-maili:</td> 
            <td><input type="email" name="emaili" maxlength="255" required="required" value="" /></td> 
           </tr> 
           <tr> 
            <td>Arsyeja:</td> 
            <td><input type="text" name="arsyeja" maxlength="255" required="required" value="" /></td> 
           </tr> 
           <tr> 
            <td>Mesazhi:</td> 
            <td><textarea name="mesazhi" rows="10" cols="38" required="required"></textarea></td> 
           </tr> 
           <tr> 
            <td><span>Kur &euml;sht&euml; formuar kompania jon&euml;?</span><br /><span class='gensmall'>P&euml;rgjegja: 1996</span></td> 
            <td><input type="text" name="captcha_answer" maxlength="20" required="required" pattern="[A-Za-z0-9]" value="" /></td> 
           </tr> 
           <tr> 
            <td></td> 
            <td align="right"><input type="submit" name="dergo" class="bold" value="D&euml;rgo e-mailin" /></td> 
           </tr> 
          </table> 
         </td> 
         <td width="60%" style="padding-left: 10px; border-left: 1px solid #CCC;"> 
          tesstestesttesstestesttesstestestte<br />sstestesttesstestest<br />tesstestest 
         </td> 
        </tr> 
       </tbody> 
      </table> 
      </form> 
     </div> 
    </div> 
</div> 
<script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="./js/jquery-ui-1.8.20.js"></script> 
<script type="text/javascript" src="./js/core.js"></script> 
</body> 
</html>

這是這些div的確切位置：

<div id="products_page" class="hidden" style="width: 600px"> 
    <br /> 
    <div class="single_cat"> 
     <div class="product_cat"><br /><br /><img src="style/images/jogurtat.gif" alt="Jogurt" /></div> 
     <a href="?products=yoghurts"><img src="style/images/read_more.gif" alt="readmore" /></a> 
    </div> 

    <div class="single_cat"> 
     <div class="product_cat"><br /><br /><img src="style/images/jogurtat.gif" alt="Jogurt" /></div> 
     <a href="?products=yoghurts"><img src="style/images/read_more.gif" alt="readmore" /></a> 
    </div> 
</div>

這是CSS：

@font-face { 
    font-family: Cocon; 
    src: url('font/Cocon-Bold.otf'); 
} 

@font-face { 
    font-family: Gothic; 
    src: url('font/GOTHIC.ttf'); 
} 

:invalid { 
    box-shadow: none; 
} 

:-moz-submit-invalid { 
    box-shadow: none; 
} 

:-moz-ui-invalid { 
    box-shadow: none; 
} 

body { 
    margin: 0; 
    color: #00a1f5; 
    font-family: Gothic, sans-serif; 
} 

a img, a:active img, a:visited img, a, a:hover, a:active, a:visited { 
    text-decoration: none; 
    color: inherit; 
} 

h1 { 
    color: #00a1f5; 
    font-size: 30px; 
    font-weight: bold;  
} 

th { 
    border-bottom: 1px solid #CCCCCC; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    font-weight: bold; 
    color: #008ad2; 
    padding-bottom: 5px; 
    text-transform: uppercase; 
    margin: 0.5em 0pt; 
} 

input[type="text"], input[type="email"] { 
    width: 220px; 
    border: 1px solid #CCC; 
    color: #666; 
    font-size: 10px; 
    padding: 3px 0 3px 0; 
} 

textarea { 
    border: 1px solid #CCC; 
    color: #666; 
    font-size: 10px; 
    font-family: Helvetica, Arial, sans-serif; 
    resize: none; 
} 

input[type="submit"] { 
    border: 1px solid #CCC; 
    color: #666; 
    padding: 5px; 
    cursor: pointer; 
    border-radius: 4px; 
    font-family: Gothic, sans-serif; 
} 

#bylmeti { 
    width: 40%; 
    position: relative; 
    margin: 0 auto 0 auto; 
} 

#top { 
    display: inline !important; 
    line-height: 0; 
} 

#slide { 
    width: 620px; 
    height: 300px; 
    border: 1px solid #000; 
    text-align: center; 
} 

#langs { 
    float: right; 
    padding-top: 20px; 
    margin-right: -40px; 
} 

#logo { 
    vertical-align: bottom; 
    display: inline-table; 
    float: left; 
    width: auto; 
    margin-top: -97px; 
    margin-left: -60px; 
} 

#menu { 
    width: 600px !important; 
    margin-top: -40px; 
    margin-left: 70px !important; 
    float: left; 
} 

#menu ul { 
    position: relative; 
    overflow: hidden; 
} 

#menu li { 
    list-style: none; 
    display: inline; 
    padding-left: 5px; 
    font-family: Cocon, sans-serif; 
    font-size: 18px; 
    text-transform: uppercase; 
} 

.small { 
    font-size: 9px;  
} 

.gensmall { 
    font-size: 10px; 
    font-weight: bold; 
    color: #0080c2; 
} 

.hidden { 
    display: none; 
} 

.content { 
    width: auto; 
    min-width: 620px; 
    background-color: #efefef; 
    border-radius: 15px; 
    padding: 10px 25px 10px 10px; 
    border: 1px solid #CCC; 
} 

.content_nopadding { 
    width: auto; 
    min-width: 620px; 
    background-color: #efefef; 
    border-radius: 15px; 
    padding: 0 10px 10px 10px; 
    border: 1px solid #CCC; 
    line-height: 1.5; 
} 

.header_message { 
    position: fixed; 
    top: 0; 
    width: 99.9%; 
    background-color: #0080c2; 
    border-bottom: 2px dotted #006aa2; 
    color: #FFF; 
    text-align: center; 
    font-size: 12px; 
    padding: 3px 0 3px 0; 
    font-weight: bold; 
    z-index: 200; 
    border-radius: 0 0 10px 10px; 
    font-family: Gothic, sans-serif; 
} 

.bold { 
    font-weight: bold; 
} 

.single_cat { 
    display: inline;  
} 

.product_cat { 
    width: 212px; 
    height: 200px; 
    border-top: 1px solid #caeeff; 
    border-right: 1px solid #caeeff;  
    border-left: 1px solid #caeeff; 
    border-radius: 20px 20px 0 0; 
    text-align: center; 
}

任何想法如何我會在線顯示這些方塊？

來源

2012-11-07 Aborted

回答

1

嘗試display: inline-block：

#products_page { 
    font-size: 0; 
} 

#products_page > .single_cat { 
    display: inline-block; 
    font-size: 12px; 
    width: 300px; 
}

來源

2012-11-07 14:00:05

0

，而不是display:inline;嘗試加入float:left;您.product_cat或.single_cat CSS定義（w3schools-float）

來源

2012-11-07 13:48:34

相關問題

 相關問題