我在这里遇到了一个问题，我试图将一个盒子放在网站的右侧，但不知道为什么它不起作用，我尝试使用justify-content:flex-end;将盒子对齐到页面的“末尾”，然后添加padding-right为200px，但可惜这并不起作用。对于解释方面的任何帮助将不胜感激。*{margin:0;padding:0;box-sizing:border-box;}.container{width:100

将网站的盒子定位在右侧的方法

我在这里遇到了一个问题，我试图将一个盒子放在网站的右侧，但不知道为什么它不起作用，我尝试使用<code>justify-content: flex-end;</code>将盒子对齐到页面的“末尾”，然后添加<code>padding-right</code>为<code>200px</code>，但可惜这并不起作用。对于解释方面的任何帮助将不胜感激。 >

* {
    保证金：0；
    填充：0；
    框大小：边框框；
  }
  。容器 {
    宽度：100%；
    高度：50vh；
    背景颜色：#1f2937；
    位置：静态；
    显示：柔性； 
    弹性方向：列； 
    调整内容：居中； 
  }

 
  
  。页脚 {
    位置：绝对；
    底部：0px；
    宽度：100%；
    高度：10vh；
    背景颜色：#1f2937；
    白颜色;
    文本对齐：居中；
    显示：柔性；
    调整内容：居中；
    对齐项目：居中；
  }
  
  。标识 {
    字体大小：24px；
    字体系列：'Times New Roman'、Times、serif；
    白颜色;
    对齐内容：空间之间；
    顶部内边距：15px；
    字体系列：'Gill Sans'、'Gill Sans MT'、Calibri、'Trebuchet MS'、sans-serif；
    左内边距：200px；
    位置：绝对； 
    顶部：0；
  }
  
  .导航栏{
    白颜色;
    字体大小：18px；
    位置：固定；
    宽度：85%；
    顶部：0；
    右：0；
    保证金：自动；
    显示：柔性；
    对齐项目：居中；
    调整内容：弹性结束；
    弯曲方向：行；
    顶部内边距：15px；
    右内边距：200px；
  }
  
  .navbar ul li {
    列表样式：无；
    显示：内联块；
    边距：0 20px； 
    文本装饰：无；
  }
  
  。文本1 {
    位置：相对；
    白颜色;
    左内边距：200px；
    字体大小：48px；
    字体粗细：粗体；
    宽度：720px；
  }
  .text2{
    白颜色;
    字体大小：18px；
    左内边距：200px；
    宽度：520px；
  }


  .text3{
    文本对齐：居中；
    显示：柔性；
    对齐项目：居中； /*垂直居中*/
    调整内容：正确； /*水平居中*/
    宽度：500px；
    高度：350px；
    背景颜色：灰色； 
  }
 </前>
;
<html lang="zh-cn">

<头>
  <元字符集=“UTF-8”>
  <元名称=“视口”内容=“宽度=设备宽度，初始比例= 1.0”>
  <标题>网站
  
</头>

<正文>
  
    
      标题徽标
    ;
    <div class="navbar">
      <ul>
        <li><a href="index.html">header link one</a></li>
        <li><a href="index.html">header link two</a></li>
        <li><a href="index.html">header link three</a></li>
      </ul>
    </div>
    <div class="text1">
      <h2>This website is awesome</h2>
    </div>
    <div class="text2">This website has some subtext that goes here under the main title.It's a smaller font and the color is lower contrast</div>
    <div class="text3">this is a placeholder for an image</div>
  </div>
  <div class="footer">
    Copyright © The Odin Project 2023
  </div>

</body>

</html></pre>
<p><br /></p>
<p>我尝试使用justify-content:flex-end来对齐它，但是我已经束手无策了，说实话，对于我的问题的解释将非常有帮助，我只包含了必要的CSS代码和整个HTML文件。提前感谢大家的帮助！</p>
P粉953231781469 天前652

全部回复(1)我来回复

P粉3739908572023-08-15 18:21:28

首先，你使用了flex属性，尽管你还没有设置display:flex;

其次，要使一个div向右移动（例如box）：（根据需要进行缩进）

.container{
display:flex;
align-items:center; /*垂直居中*/
justify-content:right; /*水平居中*/
}```
#text{
display:block;
}

取消回复