如何在HTML容器中定位某些内容

我目前正在尝试建立一个网站。我希望有文本框来解释我想做什么，并在下面有一个关于我们的小提示。我想在文本周围加入灰色边框，并保持文本部分为白色。我最初试图使用margin来完成这项工作，但由于它工作得更好，所以我改用container。当我尝试使用绝对值将文本框放置在容器中时，它不允许我这样做。为了使文本框最有效，我需要放置精确的坐标，而不是仅仅向右或向左浮动。下面是我试图合并的代码。非常感谢您的帮助

div2 {
  font-size: 20px;
  font-family: Georgia;
  background-color: #3374FF;
  width: 320px;
  style="position: absolute;
  top: 10px;
  left: 250px;
  border: 2px solid #3374FF;
  padding: 5px
  margin: 5px
}


.site_container {
              max-width: 650px;
              margin-left: auto;
              margin-right: auto;
              background-color: blue;
 }

<div class="site_container">

<div2 style="position: absolute; top:570px; left:245px">
<fontcolor="white">Services/Projects we offer:
<br />
<br />-Websites
<br />-Mobile Development
<br />-Design
<br />
</div2>
</font>

div2{
字体大小：20px；
字体系列：格鲁吉亚；
背景色：#3374FF；
宽度：320px；
style=“位置：绝对；
顶部：10px；
左：250px；
边框：2个实心#3374FF；
填充：5px
保证金：5px
}
.site_容器{
最大宽度：650px；
左边距：自动；
右边距：自动；
背景颜色：蓝色；
}
我们提供的服务/项目：



-网站

-移动开发

-设计

---

这是一个html文本框的示例。还有三个其他文本框，位置类似。感谢您的帮助。非常感谢您的帮助。首先，您应该避免使用

（现在太旧了）或者

/

不存在的元素。然后，您应该使用

列表而不是

列表，语义更像这样。如果您想使用相对于其父元素的绝对坐标来放置子元素，则必须在父元素上设置

位置：相对

（或绝对）“站点_容器”也是如此

div2 {
  font-size: 20px;
  font-family: Georgia;
  background-color: #3374FF;
  width: 320px;
  style="position: absolute;
  top: 10px;
  left: 250px;
  border: 2px solid #3374FF;
  padding: 5px
  margin: 5px
}


.site_container {
              max-width: 650px;
              margin-left: auto;
              margin-right: auto;
              background-color: blue;
 }

<div class="site_container">

<div2 style="position: absolute; top:570px; left:245px">
<fontcolor="white">Services/Projects we offer:
<br />
<br />-Websites
<br />-Mobile Development
<br />-Design
<br />
</div2>
</font>

（我不知道你想要的y/x坐标）

---

div2？什么是div2？你的代码中有很多错误。没有什么像

和

fontcolor

那样。你可以使用多个

div

，你不需要增加/添加整数。我会编辑代码。这是文本框的约束，不要使用

font

标记，因为它在HTML5中不受支持。请阅读本文它仍然是错误的。没有像这样的属性`style=“position:absolute；”它应该只是

位置：绝对
；你们能用列表把物体放在一起吗。我已经研究过了，但找不到一种方法来找到如何将它们并排放置你所说的“对象”是什么意思
网站
移动开发
设计
？还是别的？谢谢你的回答。如果使用这种方法，它们还会保留文本框吗？您所说的保留文本框是什么意思？Flexbox方法允许您将元素并排放置，并允许您更改顺序或位置（行或列）。这是一个非常强大的对齐项目的工具：我让它工作。非常感谢你的帮助。太棒了！
.site_container {
    position: relative;
    display: flex;
    width: 100%;
    background: blue;
}

.site_child{
  position: relative;
  font-size: 20px;
  font-family: Georgia;
  background: #3374FF;
  margin: 5px;
}

<div class="site_container">
    <div class="site_child">
        <span>Services/Projects we offer:</span>
        <ul>
          <li>Websites</li>
          <li>Mobile Development</li>
          <li>Design</li>
        </ul>
    </div>
    <div class="site_child">
        <span>Services/Projects we offer 2:</span>
        <ul>
          <li>Websites</li>
          <li>Mobile Development</li>
          <li>Design</li>
        </ul>
    </div>
    <div class="site_child">
        <span>Services/Projects we offer 3:</span>
        <ul>
          <li>Websites</li>
          <li>Mobile Development</li>
          <li>Design</li>
        </ul>
    </div>
</div>