Html 如何在我绘制的框元素旁边获取列表？_Html_Css

Html 如何在我绘制的框元素旁边获取列表？

html css

Html 如何在我绘制的框元素旁边获取列表？,html,css,Html,Css,我一直在浏览论坛，试图应用我读到的关于相对位置和浮动等信息，但到目前为止没有运气。我昨天刚开始写HTML和CSS 站点的大部分都包含在一个框中，定义大致如下： body { margin: 150px ; text-align: left; } .box { color: black ; width: 390px ; border: 1px solid black ; padding: 2em ; } 所容纳之物我有一份清单 <div> &

我一直在浏览论坛，试图应用我读到的关于相对位置和浮动等信息，但到目前为止没有运气。我昨天刚开始写HTML和CSS

站点的大部分都包含在一个框中，定义大致如下：

body {
margin: 150px ; 
text-align: left;
}
.box {
    color: black ;
    width: 390px ;
    border: 1px solid black ;
    padding: 2em ;
}


所容纳之物

我有一份清单

<div>
<ul style="list-style-type:none;">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</div>



项目1
项目2
项目3

我想显示在我画的这个盒子的右边。对我来说，最简单的定位方法是什么

是我正在玩的整个游戏的屏幕截图。

将这些样式添加到你的身体标签中

body {
  margin-left: 70px;
  margin-right: 70px;
  text-align: left;
}

您将发现在定位元素时非常有用。要解决您的特定问题，请尝试以下方法：

HTML:

成功了！不过我遇到了一个新问题！似乎列表和主内容框一起位于页面中央。但是，我想保持内容框的大小和位置与我的截图中的相同，只需将列表钉在旁边即可。是否有一个简单的解决方法，或者整个过程现在需要重新思考？这就是我现在看到的。（顺便说一句，谢谢你这么快的回复！！我一定会仔细查看flexbox的内容）：）没问题。尝试将

flex:1

添加到

.box

类，使内容框更窄而不是更宽。从

.menu

和

flex:1

从

.box

中删除

宽度：100%

-然后播放

.box

类的宽度，直到获得所需的结果

body {
  margin-left: 70px;
  margin-right: 70px;
  text-align: left;
}

<body>
  <div class="box-container">
    <div class="box">
      CONTENT
    </div> 
    <div>
      <ul style="list-style-type:none;">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
      </ul>
    </div>
  </div>
</body>

.box-container{
  display: flex;
}