兄弟元素在一行横排的三种方法

Example：

    
    ![](images/logo/shirt.png)
    请输入商品介绍信息

Q&S

和兄弟元素要在同一行横排，css 如何布局，或者html 该如何写?</p> <hr> <h4>解决方法：</h4> <h5>一、HTML 布局方式解决</h5> <p><strong>思路：</strong> 把<a/>和<textarea/>元素都包裹在<span>元素内，即可实现。<br> <strong>因为:</strong><span/>特点是占用的是内容有多宽就占用多宽的空间距离, 参考span与div的区别的链接<br> <strong>注意：</strong>前提要保证两个兄弟元素的width和height 之和要<strong>小于父元素</strong></p> <pre><code><li class="td-td-info"> <!-- <span></span>可使得兄弟元素横排 --> <span><a href="http://www.baidu.com"></a></span> <span><textarea rows="5" cols="30">请输入商品介绍信息

---

二、css 样式解决

1、使用float的属性，解决相邻元素横排的问题，
参考链接--4. 相邻元素含有float属性

.td-td-info a ,.td-td-info textarea {
  float: left;
  list-style: none;
 /*display: inline-block;*/
}

2、使用内联元素inline
原因：　inline元素的特点是： 和其他元素都在一行上；
参考此链接--理解display：block/inline/inline-block

.td-td-info a ,.td-td-info textarea {
 display: inline;
}