时间戳

首页 > 解决方案 > 无法向左浮动表格和图标

html - 无法向左浮动表格和图标

问题描述

我最近决定对 HTML 进行深入了解（我的意思是不只是到处打 bootstrap）。我一直在尝试使用 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>

标签： htmlcssforms

解决方案

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

编辑：我看到你确实调整了“image-size”标签的大小，但你的搜索栏 div 看起来仍然是默认的。

编辑 2：我得到了它的工作。这是我所做的：

  1. 删除了 .clr-fix。

  2. 仅左浮动#image-size

  3. 将#query-items 减少到或低于 75% 宽度

  4. 删除显示：inline-block

推荐阅读