当前位置： 文江博客话题详情

我尝试使用 css display:inline 和 inline-block 排列我的标题元素，但我所做的一切都不起作用

发布于 2025-01-10 07:01:15 字数 3522 浏览 1 评论 0原文

无论我尝试什么，我似乎都无法让标题元素内的分区排列起来而不是堆叠起来。我希望徽标向左浮动，而社交媒体图标和搜索栏向左浮动。另外，我希望搜索栏图标（放大镜）也与文本区域对齐。

这是 HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Maj's Php Project 2022</title>
        
        <!-- Jquery Link -->
        
        <!-- CSS Stylesheet Link -->
        <link href="css/styles.css" rel="stylesheet" type="text/css" />
        
        
        <!-- Bootstrap Links -->
                
        <!-- Metadata Information -->
        
        <!-- Website Comment Information -->
        
    </head>
    
    <body>
       <div id="wrapper">
        <header>
            
            <div id="logo">
            
            </div>
            
            <div id="social-media-icons">
            
                <img src="img/fb.png" />
                <img src="img/fb.png" />
                <img src="img/fb.png" />
                <img src="img/fb.png" />
                
            </div>
            
            <div id="search-bar">
            <img src="img/search.png" width="25px" height="25px" />
            <form action="#" method="POST">
                <input type="text" placeholder="Search" name="search" id="search" />
                <input type="submit" value="GO" name="submit" id="submit" />
            
            </form>
            </div>
            
            
            
            
            
            <nav>
                <ul>
                    <li><a href="">HOME</a></li> |
                    <li><a href="">HOME</a></li> |
                    <li><a href="">HOME</a></li> |
                    <li><a href="">HOME</a></li> |
                    <li><a href="">HOME</a></li> |
                    <li><a href="">HOME</a></li>
                </ul>
            </nav>
        
        </header>

这是 CSS：

   /* GLOBALS */



/* ELEMENT */

    body {
        background-color: white; 

    }
    
    header {
        width: 960px;
        background-color: #336699;
        border-radius: 15px;
        padding: 10px;
        
    }
    
    main {
        background-color: #33FF99;
        border-radius: 15px;
        padding: 10px;
        color: #330099;
    }
    
    li {
        display: inline;
        padding: 5%;
    }
    
    li > a {
        text-decoration:none;
        color: #33CC99;
    }
    
    li > a:hover {
        color: #330066;
    }


    footer {
        background-color: #336699;
        border-radius: 15px;
        padding: 10px;
        color: #33CC99;
    }
    
    header {
        display: inline-block;
        
    }
    
/* IDS */
    
    #wrapper {
        
        border-radius: 15px;
        
        width: 960px;
        clear: both;
        margin: 0 auto;
        padding-top: 5px;
    }
        
    #logo {
        width: 100px;
        height: 100px;
        margin: 5px;
        margin-top: 5px; 
        background-color: white;
        border-radius: 15px;
    }   
    
    #search-bar {
        display: inline;
        float: right;
    }
    
    #social-media-icons {
        float: right;
    }


/* CLASSES */

我需要 中的所有 div 来对齐内联，但浮动元素不起作用。我还缺什么啊！请并谢谢您。

原文

No matter what I attempt, I cannot seem to get the divisions within the header element to line up instead of stack. I wanted the logo to float left, while the social media icons and the search bar float left. Also, I want the search bar icon (magnifying glass) to also fall inline with the text area.

Here is the HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Maj's Php Project 2022</title>
        
        <!-- Jquery Link -->
        
        <!-- CSS Stylesheet Link -->
        <link href="css/styles.css" rel="stylesheet" type="text/css" />
        
        
        <!-- Bootstrap Links -->
                
        <!-- Metadata Information -->
        
        <!-- Website Comment Information -->
        
    </head>
    
    <body>
       <div id="wrapper">
        <header>
            
            <div id="logo">
            
            </div>
            
            <div id="social-media-icons">
            
                <img src="img/fb.png" />
                <img src="img/fb.png" />
                <img src="img/fb.png" />
                <img src="img/fb.png" />
                
            </div>
            
            <div id="search-bar">
            <img src="img/search.png" width="25px" height="25px" />
            <form action="#" method="POST">
                <input type="text" placeholder="Search" name="search" id="search" />
                <input type="submit" value="GO" name="submit" id="submit" />
            
            </form>
            </div>
            
            
            
            
            
            <nav>
                <ul>
                    <li><a href="">HOME</a></li> |
                    <li><a href="">HOME</a></li> |
                    <li><a href="">HOME</a></li> |
                    <li><a href="">HOME</a></li> |
                    <li><a href="">HOME</a></li> |
                    <li><a href="">HOME</a></li>
                </ul>
            </nav>
        
        </header>

And here is the CSS:

   /* GLOBALS */



/* ELEMENT */

    body {
        background-color: white; 

    }
    
    header {
        width: 960px;
        background-color: #336699;
        border-radius: 15px;
        padding: 10px;
        
    }
    
    main {
        background-color: #33FF99;
        border-radius: 15px;
        padding: 10px;
        color: #330099;
    }
    
    li {
        display: inline;
        padding: 5%;
    }
    
    li > a {
        text-decoration:none;
        color: #33CC99;
    }
    
    li > a:hover {
        color: #330066;
    }


    footer {
        background-color: #336699;
        border-radius: 15px;
        padding: 10px;
        color: #33CC99;
    }
    
    header {
        display: inline-block;
        
    }
    
/* IDS */
    
    #wrapper {
        
        border-radius: 15px;
        
        width: 960px;
        clear: both;
        margin: 0 auto;
        padding-top: 5px;
    }
        
    #logo {
        width: 100px;
        height: 100px;
        margin: 5px;
        margin-top: 5px; 
        background-color: white;
        border-radius: 15px;
    }   
    
    #search-bar {
        display: inline;
        float: right;
    }
    
    #social-media-icons {
        float: right;
    }


/* CLASSES */

I need all the divs in the to align inline, but floating the elements is not working. What am I missing! PLease and thank you.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

明天过后 2025-01-17 07:01:15

您可能希望让自己变得更轻松，并使用 Bootstrap 或 Flexbox，因为这些工具可以帮助您实现对齐愿望。使用 Bootstrap，您需要包含外部资源，例如 bootstrap css；有了 Flexbox，它就已经存在了。我更喜欢 Flexbox，因为它提供了更大的灵活性。

https://css-tricks.com/snippets/css/a -guide-to-flexbox/

我使用您的代码模拟了一个快速示例，并进行了一些轻微的添加和修改。我还假设您希望社交媒体图标和搜索功能浮动“右”而不是“左”。如果没有，那很容易改变。

HTML

<body>
  <div id="wrapper">
    <header>
      <div class="header-utility">
        <div id="logo"></div>

        <div class="social-media-icons">
          <img src="img/fb.png" />
          <img src="img/fb.png" />
          <img src="img/fb.png" />
          <img src="img/fb.png" />
        </div>

        <div class="search-bar">
          <form action="#" method="POST">
            <img src="img/search.png" />
            <input type="text" placeholder="Search" name="search" class="search-input" />
            <input type="submit" value="GO" name="submit" id="submit" class="search-submit" />
          </form>
        </div>
      </div>

      <nav>
        <ul>
          <li><a href="">HOME</a></li> |
          <li><a href="">HOME</a></li> |
          <li><a href="">HOME</a></li> |
          <li><a href="">HOME</a></li> |
          <li><a href="">HOME</a></li> |
          <li><a href="">HOME</a></li>
        </ul>
      </nav>

    </header>
  </div>
</body>

CSS

/* GLOBALS */



/* ELEMENT */

body {
  background-color: white;
}

header {
  width: 960px;
  background-color: #336699;
  border-radius: 15px;
  padding: 10px;
}

main {
  background-color: #33FF99;
  border-radius: 15px;
  padding: 10px;
  color: #330099;
}

li {
  display: inline;
  padding: 5%;
}

li > a {
  text-decoration: none;
  color: #33CC99;
}

li > a:hover {
  color: #330066;
}

footer {
  background-color: #336699;
  border-radius: 15px;
  padding: 10px;
  color: #33CC99;
}

/* IDS */

#wrapper {
  border-radius: 15px;
  width: 960px;
  clear: both;
  margin: 0 auto;
  padding-top: 5px;
}

#logo {
  width: 100px;
  height: 100px;
  margin: 5px;
  margin-top: 5px;
  background-color: white;
  border-radius: 15px;
}


/* CLASSES */

.header-utility {
  display: flex;
  align-items: center;
}

.social-media-icons {
  flex-grow: 1;
  text-align: right;
  padding-right: 30px;
}

.search-input,
.search-submit {
  padding: 0px;
  height: 25px;
}

随意使用您想要的模拟。 https://jsfiddle.net/9g6ms7pz/

You may wish to make it easier on yourself and utilize either Bootstrap or Flexbox because those tools can help you with alignment desires. With Bootstrap, you'll need to include external resources like bootstrap css; with Flexbox, it's already there. My preference is Flexbox because it provides more flexibility.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

I mocked up a quick example using your code and making slight additions and modifications. I also presume you wanted the social media icons and the search functionality to float "right" instead of "left". If not, that's easy enough to change.

HTML

<body>
  <div id="wrapper">
    <header>
      <div class="header-utility">
        <div id="logo"></div>

        <div class="social-media-icons">
          <img src="img/fb.png" />
          <img src="img/fb.png" />
          <img src="img/fb.png" />
          <img src="img/fb.png" />
        </div>

        <div class="search-bar">
          <form action="#" method="POST">
            <img src="img/search.png" />
            <input type="text" placeholder="Search" name="search" class="search-input" />
            <input type="submit" value="GO" name="submit" id="submit" class="search-submit" />
          </form>
        </div>
      </div>

      <nav>
        <ul>
          <li><a href="">HOME</a></li> |
          <li><a href="">HOME</a></li> |
          <li><a href="">HOME</a></li> |
          <li><a href="">HOME</a></li> |
          <li><a href="">HOME</a></li> |
          <li><a href="">HOME</a></li>
        </ul>
      </nav>

    </header>
  </div>
</body>

CSS

/* GLOBALS */



/* ELEMENT */

body {
  background-color: white;
}

header {
  width: 960px;
  background-color: #336699;
  border-radius: 15px;
  padding: 10px;
}

main {
  background-color: #33FF99;
  border-radius: 15px;
  padding: 10px;
  color: #330099;
}

li {
  display: inline;
  padding: 5%;
}

li > a {
  text-decoration: none;
  color: #33CC99;
}

li > a:hover {
  color: #330066;
}

footer {
  background-color: #336699;
  border-radius: 15px;
  padding: 10px;
  color: #33CC99;
}

/* IDS */

#wrapper {
  border-radius: 15px;
  width: 960px;
  clear: both;
  margin: 0 auto;
  padding-top: 5px;
}

#logo {
  width: 100px;
  height: 100px;
  margin: 5px;
  margin-top: 5px;
  background-color: white;
  border-radius: 15px;
}


/* CLASSES */

.header-utility {
  display: flex;
  align-items: center;
}

.social-media-icons {
  flex-grow: 1;
  text-align: right;
  padding-right: 30px;
}

.search-input,
.search-submit {
  padding: 0px;
  height: 25px;
}

Feel free to play around with the mock as you desire. https://jsfiddle.net/9g6ms7pz/

回复 原文
~没有更多了~

关于作者

暖伴

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

饮湿

文章 0 评论 0

明月

文章 0 评论 0

02

文章 0 评论 0

hs1283

文章 0 评论 0

风向决定发型

文章 0 评论 0

落花浅忆

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文