Question

我最近决定对HTML进行深入的了解（我的意思是不仅要随处使用引导程序）。我一直试图用CSS样式创建HTML页面。最近，我无法将输入列浮动在图片图标的对面。每次我尝试向左浮动图标并输入div放置在图标旁边时，表单都会中断并且无法移动。这是我的下面的代码；

（需要并排放置的元素为绿色）

感谢您的帮助

body{
    margin: 0;
}
.container {
    width: 80%;
    margin: auto;
}

.clr-fix{
    clear: both;
}
#main-header {
    background: #333;
}
#image-size, #query-items{
    float: left;
       
}
#main-header #image-size{
    background: green;
    width: 25%;
    display: inline-block;
    padding: 20px;
    box-sizing: border-box;
}

#main-header #query-items{
    background: green; 
    clear: right;
    display: inline-block;
    padding: 20px;
    box-sizing: border-box;
}
#main-header #image-size #DDCG-logo{
    width: 117px;
    height: 25px;
}

.container #sidebar {
    float: left;
    width: 25%;
    background: #333;
    color: white;
}

.container #sidebar ul {
    list-style: none;
}

.container #sidebar ul li {
    padding: 10px;
    border-bottom: 1    px solid white;
}
#table-display{
    width: 60%;
    margin: 0 auto;
}
#table{
    
    background: #333;
    color: white;
}

<!doctype html>
<html>

<head>
    <title>DCCG Cell Locator</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
    <link rel="stylesheet" href="/Grid.css">
    <link rel="stylesheet" href="ListingPage.css" `>
    <link rel="icon" href="Images/Favicons/favicon-32x32.png">
</head>

<body>
    <div class="container">
        <header id="main-header">
            <div id="image-size">
                <img id = 'DDCG-logo' src="Images/html-imgs/Daystar-Christian-Centre.jpg">
            </div>
            <div class="clr-fix"></div>
            
            <div id="query-items">
                <i class="fas fa-search"></i>
                <input id="add-search" type="text" name="search" placeholder="Search for addresses...">
            </div>
            
        </header>

    </div>
    <div class="clr-fix"></div>
    <div class=container>
        <section id="sidebar">
            <ul>
                <li>About Us</li>
                <li>Announcement</li>
                <li>Offering</li>
                <li>Resources</li>
                <li>Watch Us Online</li>

            </ul>
        </section>
    </div>

    <div class=container>
        <div id="table-display">
            <div id="table">
                <div id="table-head">
                    <h1>Daystar Cell Locator</h1>
                </div>
                <section id="main-area">
                    <table>
                        <thead>
                            <tr>
                                <th>Var 1</th>
                                <th>Var 2</th>
                                <th> Var 3</th>
                                <th> Var 4</th>
                            </tr>
                        </thead>
                        <tbodY>
                            <tr>
                                <td>1</td>
                                <td>2</td>
                                <td>3</td>
                                <td>4</td>
                            </tr>
                            <tr>
                                <td>1</td>
                                <td>2</td>
                                <td>3</td>
                                <td>4</td>
                            </tr>
                            <tr>
                                <td>1</td>
                                <td>2</td>
                                <td>3</td>
                                <td>4</td>
                            </tr>
                        </tbodY>
                    </table>
                </section>
            </div>
        </div>
    </div>
    <div class="container">
        <footer id="main footer">
            <p>All copyrights &copy DayStar Christian Centre. All Rights Reserved.</p>
        </footer>
    </div>
</body>

</html>

Answer 1

我认为您需要调整div大小。默认情况下，即使div标签不使用任何宽度，也占用100％的宽度。如果它们都设置为默认值，那么其中一个就没有空间浮动到另一个。

编辑：我看到您确实调整了“图像尺寸”标签的尺寸，但是您的搜索栏div看起来仍然是默认设置。

编辑2：我的工作已经完成。这是我所做的：

已删除.clr修复程序。
仅向左浮动#image尺寸
减少宽度等于或小于75％的#query项目
删除显示：内联阻止

无法浮动表格和图标

1 个答案: