Question

我有一个像这样的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一样，但我似乎无法得到它：

enter image description here

我的问题是将所有内容都放在一行中，例如img。

感谢任何形式的帮助

http://jsfiddle.net/TUT7G/

Answer 1

你离我不远。你真正需要考虑的唯一事情就是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/

Answer 2

这似乎是桌子的理想场所。由于各种原因，表格（非常）不适合页面布局（其中一些最重要的是它们如何使那些使用屏幕阅读器“看到”网页的人生活困难）。但是，在您的情况下，您的数据显然显示为表格格式 - 也就是说将其放在表格中具有逻辑意义。

但是如果我弄错了，那么你可以使用内联块元素。内联块元素组合块元素的属性（例如允许宽度）和内联元素（例如不占用其包含元素中的整行）。这是一个简单的例子：

<div>
    <span style="display: inline-block; width: 10em;">text</span>
    <span style="display: inline-block; width: 10em;">more text</span>
    <span>even more text!</span>
</div>
<div>
    <span style="display: inline-block; width: 10em;">another line of text</span>
    <span style="display: inline-block; width: 10em;">more text on the next line</span>
    <span>even more text on the next line!</span>
</div>

如果你不相信它有效，那么这就是一个小提琴;）。

http://jsfiddle.net/wLZwb/

如何使用CSS将文本放在此框中？

2 个答案: