Question

我尝试将绿色文本显示在钱包文本和图标下，但我无法使其正常工作，为什么这里的响应性如此怪异？

https://jsfiddle.net/8dxt0hkj/2/ <-在这里看看代码

预先感谢

<div class="wallet">
    <span class="wallettext">
        Wallet 
        <img src="imgs/wallet.png" class="wallet_icon">
    </span>
    <p class="wallet_value">$35,95</p>
</div>

Answer 1

要在钱包文本和图标下放置绿色文本，您需要更改wallet_value的CSS。您可以将display: inline-block;更改为display: block;，以使wallet_value在下一行开始（并因此出现在钱包文本和图标下方。）尽管如此，这将使文本紧靠页面的左边缘。如果您想使文本更好地对齐，还可以添加margin-left: 30px;。

我也注意到这一行：

<input type="text" placeholder="search for..."">

您有一个额外的“”字符，可能会使事情弄糟。请尝试将该行更改为：

<input type="text" placeholder="search for...">

编辑：听起来好像您希望标题div中的所有内容全部都在一行上，并在调整窗口大小时根据需要更改大小，以使标题始终适合一行。这是一个edited JSFiddle，其中包含有效的代码（就我想您所要执行的操作而言，应尽我所能。）为此，我经常使用display: flex选项，因此建议您检出{ {3}}和/或this tutorial（如果您不熟悉flex）。

我将标题设置为display: flex;。我还将display: flex;和flex-direction: column;放在wallet div上，这样它将根据您的要求在另一个元素的上方显示一个元素。我通过删除绝对宽度并使其具有min-width: 80px;以及width: 100%;来动态地改变搜索栏的宽度。然后，当我将其父项设置为flex-grow: 1;时，搜索栏将拉伸以填充剩余空间。我还取出了一些使边框过宽的大边距，并将整个标题的最小宽度设置为700px，这样在调整窗口大小时它不会变得太小。那是您要找的东西吗？

我看不到此文本在此图标下

1 个答案: