html 如何将两个元素相邻对齐？[关闭]

jgzswidk  于 2023-11-15  发布在  其他
关注(0)|答案(2)|浏览(145)

已关闭。此问题需要更多focused。目前不接受答案。
**想要改进此问题吗？**更新问题，使其仅关注editing this post的一个问题。

6天前关闭
Improve this question的
我正在为一个项目建立一个投资组合网站，我正在努力将页面的元素放在一起，
具体来说，我想我的头，读“客户端网站”对齐旁边的头阅读“计算机科学创造性“这里是我的线框我去了什么。也对如何使代码看起来更好的一般性提示是非常感谢让我知道，如果你需要看到实际的网站

  1. @font-face {
  2.     font-family: sourcecodepro;
  3.     src: url(fonts/static/SourceCodePro-Regular.ttf);
  4.     
  5. }
  7. /*.flexbox-conatiner{
  8.   display: flex;
  9.   flex-direction: row;
  10.   
  11. }*/
  12. body{
  13.     background: #11151C;
  14.    display: inline-flex;
  15.    flex-direction: column;
  16.    flex-wrap: wrap;
  17.    
  19.     
  20.    }
  22.   
  24.  
  26. h1{
  27.     font-family: sourcecodepro;
  28.     font-size: 25px; 
  29.     font-weight: 10;
  30.     color: #FFFCFF;  
  31.     margin: 15px;
  32. }
  34. h2 {
  35.     font-family: sourcecodepro;
  36.     font-size: 25px;
  37.     color: #FFFCFF;
  38. }
  40. h3 {
  42. font-family: sourcecodepro;
  43.   font-size: 25px;
  44.   font-weight: bold;
  45.   color: #FFFCFF;
  46.   
  48.   
  49.   
  50. }
  53. .scrollBox{
  54.   
  55.   width: 150px;
  56.   height: 150px;
  57.   line-height: 3em;
  58.   overflow: scroll;
  59.   padding: 5px;
  60.   font-size: 25px;
  61.   font-weight: bold;
  62.   font-family: sourcecodepro;
  63.   color: #FFFCFF}
  64. /* Add a black background color to the top navigation */
  65. #textbackground{
  66.  border-radius: 15px;
  67.  background: rgba(212, 246, 178, 0.3);
  68.  border-width: 195px;
  69.  border-color: #FFFCFF;
  70.  padding: 1rem;
  71. width: 600px;       
  72. }
  73. p1 {
  74.     font-family: sourcecodepro;
  75.        font-size: 20px;
  76.         color: #FFFCFF;    
  77. }
  79. p2{
  80.   font-family: sourcecodepro;
  81.     font-size: 20px;
  82.     color: #FFFCFF;
  83.  
  84. }
  86. .clientsBox {
  87.   position: absolute;
  88.   top: 0;
  89.   left: 0;
  90.   background-color: #333;
  91.   opacity: 0.3;
  92.   padding: 20px;
  93.   color: #fff;
  94. }
  95. .clientsBox h1 {
  96.   font-family: sourcecodepro;
  97.   font-size: 25px;
  98.   font-weight: bold;
  99. }
  101. .topnav {
  102.   background-color: #333;
  103.   opacity: .3;
  104.   overflow: hidden;
  105. }
  107. /* Style the links inside the navigation bar */
  108. .topnav a {
  109.   float: left;
  110.   color: #f2f2f2;
  111.   text-align: center;
  112.   padding: 14px 16px;
  113.   text-decoration: none;
  114.   font-size: 17px;
  115. }
  117. /* Change the color of links on hover */
  118. .topnav a:hover {
  119.   background-color: #ddd;
  120.   color: black;
  121. }
  123. /* Add a color to the active/current link */
  124. .topnav a.active {
  125.   background-color: #04AA6D;
  126.   color: white;
  127. }
  129. @media (max-width: 600px) {
  130.   .flexbox-container {
  131.     flex-direction: column;
  132.     /* Change to column for smaller screens */
  133.   }
  135.   #textbackground {
  136.     width: 100%;
  137.     /* Adjust the width for smaller screens */
  138.   }
  139. }
  141. @media (max-width: 480px) {
  142.   h3 {
  143.     flex-wrap: wrap;
  144.   }
  145. }

个字符
我试过Flexbox的东西，但老实说，我不是很擅长它，我试过常规的CSS定位，但它使标题文本静态，它没有让我将放在标题下的文本被格式化，我试过内联，没有一个工作，也许我只是做得不对

Html

2条答案

按热度按时间
smdncfj3

smdncfj31#

我刚读了你的问题。
你应该首先改变HTMl的结构，并正确地关闭所有的标签。
把你的标题和“客户端站点”代码放在一个主框div中，就像这样，并使用flex属性显示：flex; justify-content：space-between; justify-items-center;
头部和客户端站点都将显示在彼此的前面。

  1. <!DOCTYPE html>
  2. <html lang='en'>
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatable" content="IE-edge">
  6.   <meta name="viewport" content="width=device-width, inital-scale=1.0">
  7.   <title>Document</title>
  8.   <link rel="stylesheet" href="/style.css">
  9.   <style>
  10.     body{
  11.       background: #11151C;
  12.       color: #fff;
  13.     }
  14.     .main-box {
  15.       display: flex; 
  16.       justify-content: space-between; 
  17.       align-items-center;
  18.     }
  19.     h1{
  20.       font-family: sourcecodepro;
  21.       font-size: 25px; 
  22.       font-weight: 10;
  23.       color: #FFF;  
  24.     }
  25.     .flexbox-container {
  26.       display: flex;
  27.       align-items: center;
  28.       justify-content: space-between;
  29.     }
  30.   </style>
  31. </head>
  32. <body>
  33.   <div class="main-box">
  34.     <div class="topnav">
  35.           <a class="active" href="#home">Home</a>
  36.           <a href="#news">News</a>
  37.           <a href="#contact">Contact</a>
  38.           <a href="#about">About</a>
  39.       </div>
  40.       <p>Client Sites</p>
  41.   </div>
  42.   <div class="CSmadeC">
  43.     <div id="h1" class="flexbox-container">
  44.       <h1>Computer Science Made Creative</h1>
  45.     </div>
  46.   </div>
  47.   <div id="textbackground">
  48.     <p>
  49.       In a world where every website and app looks<br />
  50.       the same the goal should be to code creatively,<br />
  51.       you give me a vision and with software as my canvas,<br />
  52.       ill paint it for you.
  53.     </p>
  54.   </div>
  55. </body>
  56. </html>

字符串
请尝试使用更多来自w3学校的HTML标签。

展开查看全部
赞(0）分享  回复(0）举报  2023-11-15
holgip5t

holgip5t2#

我很抱歉，但你的消息是有点不清楚.它看起来像你想让我审查一些代码，但我不知道你指的是哪个代码或你需要帮助的具体问题.你可以请提供更多的上下文或澄清你的问题？在您的html代码中，这个词“客户端网站失踪”.

  1. body{
  2.     background: #11151C;
  3.     color: #fff;
  4.    }
  5. h1{
  6.     font-family: sourcecodepro;
  7.     font-size: 25px; 
  8.     font-weight: 10;
  9.     color: #FFF;  
  10. }
  11. .flexbox-container {
  12.   display: flex;
  13.   align-items: center;
  14.   justify-content: space-between;
  15. }

个字符

展开查看全部
赞(0）分享  回复(0）举报  2023-11-15
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com