如何让我的文本彼此相邻而不是在顶部

<style>
    .text {
        display: inline-block;
        float: left;
        margin-right: 10px; /* 可根据需要调整文本之间的间距 */
    }
</style>

<div>
    <div class="text">文本1</div>
    <div class="text">文本2</div>
    <div class="text">文本3</div>
</div>

<style>
    .container {
        display: flex;
    }
    .text {
        flex: 0 0 auto; /* 可根据需要调整文本元素的宽度 */
        margin-right: 10px; /* 可根据需要调整文本之间的间距 */
    }
</style>

<div class="container">
    <div class="text">文本1</div>
    <div class="text">文本2</div>
    <div class="text">文本3</div>
</div>