Question

我无法在我的某个网站上显示某些HTML内联。我希望有几个正方形内联。我已经尝试在css中使用display: inline;，但它没有做到这一点。

这是它的样子： 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;
}

知道如何在线显示这些方块吗？

Answer 1

尝试display: inline-block：

#products_page {
    font-size: 0;
}

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

Answer 2

而不是display:inline;尝试将float:left;添加到您的.product_cat或.single_cat css定义（w3schools-float）

内联显示一些div

2 个答案: