我有一个包含这样的 css 的 div 框:
.productinfo2
{
margin-top: 20px;
display: inline-block;
vertical-align: top;
height: 60px;
border-style:solid;
border-width:1px;
width:800px;
float:right;
margin-right:5px;
}
这就是它现在在 HTML 中的样子:
<img src="@Html.DisplayFor(modelItem => item.Image)" alt="" />
<div class="productinfo2">
<h2>@Html.DisplayFor(modelItem => item.Title)</h2>
<p id="price">@Html.DisplayFor(modelItem => item.price)</p>
<input type="text" class="Quantity">
<p id="total">699</p>
</div>
我想让文本和文本框完全像这个 img 但我似乎不能那样做:
我的问题是将所有内容都放在一行中，例如 img。
感谢任何形式的帮助
最佳答案
你离得不远了。在这里您真正需要考虑的唯一事情是 h2 和 p 都有您需要摆脱的继承换行符。
h2 您可以使用 display:inline 轻松摆脱它。
对于 P，我只建议改用跨度。
更具体地说，以您的代码为例，您可以这样做:
<html>
<style>
.productinfo2
{
margin-top: 20px;
display: inline-block;
vertical-align: top;
height: 60px;
border-style:solid;
border-width:1px;
width:800px;
float:right;
margin-right:5px;
}
.productinfo2 h2
{
font-family:Georgia;
font-size:18px;
color:#BED600;
display:inline;
}
#price
{
font-family: Verdana;
font-size:12px;
color:#333333;
margin-left:40%;
}
#price input
{
width:10px;
}
#total
{
font-family: Verdana;
font-size:12px;
color:#333333;
margin-right:20px;
float:right;
}
</style>
<body>
<div class="productinfo2">
<h2>test</h2>
<span id="price">price <input type="text" class="Quantity"></span>
<span id="total">total: 699</span>
</div>
</body></html>
在 JSFiddle 上查看:http://jsfiddle.net/muKty/
关于html - 我如何使用 CSS 将文本放置在这个框中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13165923/