第一次写博文,写一个刚才遇到的问题吧。

关于ul li文字长度不固定,一行显示多列。当指定宽度时,文字长度超过指定的li宽度时解决方案:

如下代码

<h4>发送对象(共10个会员)</h4>
<div id="send_email">
<ul>
<li>tester123456(tester12346@qq.com)</li>
<li>tester12345(tester12345@qq.com)</li>
<li>test12345(test12345@qq.com)</li>
<li>willme(sdfsdf@sdf.com)</li>
<li>willbin(sdfsd@22f.com)</li>
<li>zhangsan(zhangsan@qq.com)</li>
<li>淘宝会员_u_865b68p1g7(u_265i54w3n7@localhost.com)</li>
<li>test</li>
</ul>
</div>

样式

.menber{width:754px; margin:0px auto;line-height:25px; max-height:200px;}
.menber li{clear:none;width:200px;float:left;height:25px;line-height:40px; margin-right:30px;}

这段代码是将会员信息都显示出来,一行显示三个,但是现在问题出现了,这一行 <li>淘宝会员_u_865b68p1g7(u_265i54w3n7@localhost.com)</li> 因为宽度固定,但是li里面的内容超过了200px导致且内容中有下划线且下划线后是数字或者英文导致下划线后面的内容会自动换一行显示,但是由于li的高度是固定的导致掉下去的一行内容与下面

这个可以控制文字显示的宽度,并且可以整齐的排列,但是当li里面的文字过多,超过200px时,里面的内容会掉到下面一行来,导致与下面一行的内容重叠,如果在.menber li里面加入overflow:hidden;的话内容不会掉来,但是内容会显示不全,这时应该怎么办呢,最好的解决办法就是不指定宽度,将width设置为auto;并且 加上white-space:nowrap;这个代码可以让内容不自动换行(遇到_等字符串时),这个问题是解决了,但是由于宽度不固定,所以内容显示不会那么整齐的,所有事情都很难十全十美,要顾及一些就要失去一些,这是没办法,如果各位大虾有更好的解决办法也可以分享一下。

终于成为博客员的一员了,这是我的第一篇博文,写一个关于ul li内容宽度的问题和解决方案的更多相关文章

  1. 程序员小张的第一篇博文 --记Markdown的使用学习

    1.前言 为了即将到来的面试做准备,以及记录一下平日里自己的学习过程和生活日常,我开始进驻博客园啦!这就是我的第一篇博客(有点小激动)~ 作为一只新手,首先记录一下今晚的编写博文的学习过程吧~ 2.使 ...

  2. 【教程向】——基于hexo+github搭建私人博客

    前言 1.github pages服务生成的全是静态文件,访问速度快: 2.免费方便,不用花一分钱就可以搭建一个自由的个人博客,不需要服务器不需要后台: 3.可以随意绑定自己的域名,不仔细看的话根本看 ...

  3. 通过github搭建个人博客

    今天突发奇想,想用GitHub搭建一个个人博客,就大概学习了一下,特此记录. 其实非常简单,首先要知道,这里是通过GitHub Pages进行搭建的,什么?不知道什么是GitHub Pages?Git ...

  4. Jekyll搭建个人博客-拓展版

    关于Jekyll Jekyll 是一个简单的博客形态的静态站点生产机器.它有一个模版目录,其中包含原始文本格式的文档,通过 Markdown (或者 Textile) 以及 Liquid 转化成一个完 ...

  5. Hexo+Github个人博客搭建 | 实战经验分享

    概述 第一次尝试搭建属于自己的博客,并且成功了,非常开心. 很久之前就想搭建一个博客,可是也一直没有行动,最近在逛B站的时候发现一个up主(CodeSheep)的一个视频 <手把手教你从0开始搭 ...

  6. hexo next主题深度优化(九),给博客加入主题,护眼主题,护眼色。

    文章目录 背景 效果 码 _layout.swig custom.styl eye.js 引用eye.js 直接引用 main.js pjax的函数中重写 个人博客:https://mmmmmm.me ...

  7. 个人网站迁移之旅:从博客到知识库,从 Hexo 到 Docusaurus

    或是出于跟风,或是为了简历能好看点,2020 年 2 月,在翻看了中文互联网大量的「免费个人网页搭建教程」后,我选择了 Hexo + Github Pages 的方案,找了一款看上去还不错的主题,搭建 ...

  8. Java程序员博客系统推荐!我调研了100来个 Java 开源博客系统,发现这 5 个最好用!

    大家好!我是 Guide 哥,Java 后端开发.一个会一点前端,喜欢烹饪的自由少年. 最近想倒腾一下博客,看了很多现成的比较成熟的开源博客系统,自己也简单从下面几个维度总结对比了一下: star数量 ...

  9. 历时25天,我的博客(www.ityouknow.com)终于又活了过来

    时间回到2016年的7月10号,那时候我刚刚开始正式在博客园写博客,博客园的交流氛围很好,但鉴于博客园古老的界面,同时计划创建一个自己独立的博客,毕竟自己的博客怎么折腾都行. 那时候正在研究 Spri ...

随机推荐

  1. mysql_DML_insert

    1.指定字段插入数据 insert into wsb2(stu_name,salary)values ('nan','10000'); insert into wsb2(stu_name,salary ...

  2. UML类图中的六大关系:泛化、实现、依赖、关联、聚合、组合关系

    UML定义的关系主要有:泛化.实现.依赖.关联.聚合.组合,这六种关系紧密程度依次加强,分别看一下 1.泛化 概念:泛化是一种一般与特殊.一般与具体之间关系的描述,具体描述建立在一般描述的基础之上,并 ...

  3. [转]position:relative leaves an empty space

    本文转自:http://stackoverflow.com/questions/5229081/positionrelative-leaves-an-empty-space 在使用relative进行 ...

  4. C# 文件相关操作

    百度搜的,下面这个写的挺全的.   FROM Pegasus923 http://www.cnblogs.com/pegasus923/archive/2011/01/26/1944838.html ...

  5. [转载]在线考试javaScript倒计时

    <script type="text/javascript"> /* ================== hi.baidu.com/coolinc === */ va ...

  6. External Table

    CREATE TABLE AS SELECT,使用Oracle9i的External Table  Oracle 9i 的一项新特性就是 External Table,它就象通常的数据库表一样,拥有字 ...

  7. MyFragment

    手机横竖屏自动切换不同的View: Landscape-Horizontal-横屏 Portrait-Vertical-竖屏 package com.example.shad_fnst.myfragm ...

  8. ListView优化-getView优化

    ListView作为Android中最常用的组件之一,其优化方式也比较多. 在使用ListView或是GridView的时候,往往需要自定义数据适配器.一般我们都需要复习getView方法.对于此方法 ...

  9. UINavigationController与UITabbarController的样式

    之前虽然也手写过这两中视图控制器,但是更多的还是使用SB来创建,最近发现了一些问题,现在总结一下. 1.改变UINavigationBar的颜色 在UINavigationController中,之前 ...

  10. c#实现数据集合转换为csv文本

    需求 1.将一个数据集合导出到一个csv文件中,集合类型可以视为 List<T>,T为任意类型,T包含多个属性,可指定部分属性进行导出 2.软件中有多种不同类型的数据类型需要进行导出 需求 ...