业务需要左右拖动来实现不换行查看数组件全部内容，这里记载一下实现过程。

html部分：

1
2
3
4
5
6
7
8
<div id="box">
  <div id="top">
  </div>
  <div id="bottom">
  </div>
  <div id="line">
  </div>
</div>

css部分：

1
2
3
4
5
6
#box{position:relative;}
#box ul{list-style-position:inside;margin:10px;}
#top,#bottom{color:#FFF;}
#top{float:left}
#bottom{float:right}
#line{position:absolute;top:0;left:241px;height:100%;width:4px;cursor:w-resize;}

js部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function $(id) {
  return document.getElementById(id)
}
window.onload = function() {
  var oBox = $("box"), oTop = $("top"), oBottom = $("bottom"), oLine = $("line");
  oLine.onmousedown = function(e) {
    var disX = (e || event).clientX;
    oLine.left = oLine.offsetLeft;
    document.onmousemove = function(e) {
      var iT = oLine.left + ((e || event).clientX - disX);
      var e=e||window.event,tarnameb=e.target||e.srcElement;
      var maxT = oBox.clientWight - oLine.offsetWidth;
      oLine.style.margin = 0;
      iT < 0 && (iT = 0);
      iT > maxT && (iT = maxT);
      oLine.style.left = oTop.style.width = iT + "px";
      oBottom.style.width = oBox.clientWidth - iT + "px";
      return false
    };
    document.onmouseup = function() {
      document.onmousemove = null;
      document.onmouseup = null;
      oLine.releaseCapture && oLine.releaseCapture()
    };
    oLine.setCapture && oLine.setCapture();
    return false
  };
}

效果图：