`

li float left

 
阅读更多 
<style>
.tags {
  width:100%;
  overflow: hidden;  
}
.tags li{
  float:left;
  white-space: nowrap;
  display: block;
}
</style>
<div class="box first tags">
  <h3 class="ir ir-tags">TAGS</h3> 
    <ul>        
       <li>js</li>  
       <li>css</li>  
       <li>解决方法</li>  
       <li>作品</li>
    </ul>  
</div>


  • 大小: 19.4 KB
分享到：
| mybatis 备忘
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    li float后IE下有空格

    复制代码代码如下: &lt;ul&gt; &lt;li&gt;&lt;a&gt;LINK&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a&gt;LINK&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a&gt;LINK&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a&gt;...CSS li {float:left;} IE里面在没定义li宽度的时候LINK后面会有空格，只要里面的a也加上float:left问题就解决了

    float元素浮动后高度不一致导致错位的解决办方法

    当N个元素浮动后，会导致错位的问题。一般给元素一个固定的height就没有这个现象。 但是当高度不一致时，就需要想别的办法来解决了：... } ul li{ width:160px; display:inline-block; vertical-align:top; font-size:

    CSS的ul和li实现横向排列和去掉li的点

    } #ul li { float:left; list-style:none; } 顺便拓展一下li的list-style： 复制代码代码如下: ul { list-style:square inside url(‘…/.img’); } ul { list-style:circle; } ol { list-style:upper-roman; } ...

    将ul+li 分两列显示(横向显示)的方法

    float:left;} .mycode ul{ width:280px;} .mycode li{ width:100px; float:left; display:block;} &lt;/style&gt; &lt;div&gt; &lt;ul&gt; &lt;li&gt;ABC&lt;/li&gt; &lt;li&gt;ABC&lt;/li&gt; &lt;li&gt;ABC&lt;/li&gt; &lt;li&gt;ABC&lt;/li&gt; &lt;li&gt;ABC&lt;/li&gt;

    div-css-漂亮的导航条

    float:left; width:100%; background:#F4F7FB; font-size:93%; line-height:normal; border-bottom:1px solid #BCD2E6; } #tabs1 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #...

    详解关于浮动元素float使其父元素高度塌陷的原因及解决方法

    浮动元素使其父元素高度塌陷我们经常会遇到一种情况，给一个元素设置浮动之后 float:left/right;，如果该元素的父元素有背景颜色，那么会发现父元素的背景颜色消失了；如果父元素有一个边框，那么浮动元素无法将边框...

    uchome 新增心情图标115个修改图标

    .facebox ul li { float: left; width: 25px; height: 25px; overflow: hidden; } 修改为： .facebox { padding: 8px; width: 450px; border: 1px solid #CCC; background: #FFF; z-index: 100000;} .facebox ul ...

    跨浏览器实现float:center

    我们都知道float:left和float:right，但是否想过float:center呢？居中浮动。。。 &lt;div id=macji&gt; &lt;ul class=macji-skin&gt; &lt;li&gt;列表一&lt;/li&gt; &lt;li&gt;列表二&lt;/li&gt; &lt;li&gt;列表三&lt;/li&gt; &lt;/ul&gt;&lt;/div&gt; 我们希望实现li是浮动的，...

    仿京东页面写的一个静态页面

    float:left; margin-top:5px;"&gt;&lt;img src="imgs/Tel.jpg" /&gt;&lt;/div&gt; &lt;div float:left;"&gt;手机京东 &lt;/li&gt; &lt;li class="sncTxtImg"&gt;&lt;img src="imgs/sep.jpg" /&gt;&lt;/li&gt; &lt;li class="sncTxtfTxt"&gt;企业采购&lt;/li&gt; &lt;li ...

    ul设置列表为一行2条的方法

    float:left + 设置ul的宽度 + 设置li的宽度 1.其实设置ul的列表本来是一行一行的，当设置li的float为left的时候可以看见成为一行 2.比如ul的宽度为200px,为了实现一行2条，我们可以设置li的宽度为75px,由于float为...

    博客 网页制作

    float:left;margin-left:15px;margin-top:20px;font-size=15px;} img{border:2px; solid gray;margin:2px;} p{line-height:22px;} ;height:100px;background-color:brown;margin-top:20px;margin-left:10px;...

    ul和li实现分两列（多列）布局显示

    /*如果显示三列 则width改为70px*/ float: left; display: block; } &lt;/style&gt; 复制代码代码如下: ”my”&gt; &lt;ul&gt; &lt;li&gt;那些花儿&lt;/li&gt; &lt;li&gt;那些花儿&lt;/li&gt; &lt;li&gt;那些花儿&lt;/li&gt; &lt;li&gt;那些花儿&lt;/li&gt; &lt;li&gt;那些花儿&lt;/li...

    javascript菜单

    部分代码*{ margin:0px; padding:0px;... float:left; } #caidan ul{ display:none; } #caidan li{ position:relative; } #caidan ul ul{ position:absolute; top:0px; left:102px; } &lt;/style&gt;

    CSS实现ul和li横向排列的两种方法

    float:left 这样设置有一个问题，li浮动以后则脱离了文本流，即不占位置，如果它的父级元素有具体的样式且没有固定宽高，建议父元素清除浮动，或者设置固定宽高 display:inline-block 即把li变为行内元素且可以设置...

    li在ie/firefox浏览器中行高不一致解决方法(浏览器兼容)

    复制代码代码如下: &lt;...}.tu_freeline_list li span{float:left;height:30px;overflow:hidden;width:155px;font-size:12px;}.tu_freeline_list li strong{float:right;font-size:12px;}&lt;/style&gt;&lt;ul cla

    具有Float属性的元素依然居中

    在为li设置了float:left的属性后，li的内容会向左对齐，但是我们仍然需要包含着该li的div能够居中对齐（比如说常见的页面导航条）。

    巧用隐藏和负边距实现兼容所有浏览器的ul和li并列效果

    最终效果图如下： （我写两个ul的原因是li只有一排和多排效果会不...margin-right:auto}li{float:left;display:inline;width:100px;height:100px;line-height:100px;text-align:center;margin:0 5px 10px;background:

    jQuery的砸金蛋抽奖代码.zip

    float: left; background: url(images/egg_1.png) no-repeat bottom; width: 391px; height: 268px; cursor: pointer; position: relative; margin-left: 35px; top: 100px; left: 130px; } 这是一款...

    pic_slide.rar

    .pic_content ul li{float:left;width:150px;height:100px;padding:3px;background:#9CC;text-align:center;margin:0 0 0 10px;position:relative} .pic_content ul li p{height:24px;background:#333;line-height:...

Magicbox
Global site tag (gtag.js) - Google Analytics