终于成为博客员的一员了,这是我的第一篇博文,写一个关于ul li内容宽度的问题和解决方案
第一次写博文,写一个刚才遇到的问题吧。
关于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内容宽度的问题和解决方案的更多相关文章
- 程序员小张的第一篇博文 --记Markdown的使用学习
1.前言 为了即将到来的面试做准备,以及记录一下平日里自己的学习过程和生活日常,我开始进驻博客园啦!这就是我的第一篇博客(有点小激动)~ 作为一只新手,首先记录一下今晚的编写博文的学习过程吧~ 2.使 ...
- 【教程向】——基于hexo+github搭建私人博客
前言 1.github pages服务生成的全是静态文件,访问速度快: 2.免费方便,不用花一分钱就可以搭建一个自由的个人博客,不需要服务器不需要后台: 3.可以随意绑定自己的域名,不仔细看的话根本看 ...
- 通过github搭建个人博客
今天突发奇想,想用GitHub搭建一个个人博客,就大概学习了一下,特此记录. 其实非常简单,首先要知道,这里是通过GitHub Pages进行搭建的,什么?不知道什么是GitHub Pages?Git ...
- Jekyll搭建个人博客-拓展版
关于Jekyll Jekyll 是一个简单的博客形态的静态站点生产机器.它有一个模版目录,其中包含原始文本格式的文档,通过 Markdown (或者 Textile) 以及 Liquid 转化成一个完 ...
- Hexo+Github个人博客搭建 | 实战经验分享
概述 第一次尝试搭建属于自己的博客,并且成功了,非常开心. 很久之前就想搭建一个博客,可是也一直没有行动,最近在逛B站的时候发现一个up主(CodeSheep)的一个视频 <手把手教你从0开始搭 ...
- hexo next主题深度优化(九),给博客加入主题,护眼主题,护眼色。
文章目录 背景 效果 码 _layout.swig custom.styl eye.js 引用eye.js 直接引用 main.js pjax的函数中重写 个人博客:https://mmmmmm.me ...
- 个人网站迁移之旅:从博客到知识库,从 Hexo 到 Docusaurus
或是出于跟风,或是为了简历能好看点,2020 年 2 月,在翻看了中文互联网大量的「免费个人网页搭建教程」后,我选择了 Hexo + Github Pages 的方案,找了一款看上去还不错的主题,搭建 ...
- Java程序员博客系统推荐!我调研了100来个 Java 开源博客系统,发现这 5 个最好用!
大家好!我是 Guide 哥,Java 后端开发.一个会一点前端,喜欢烹饪的自由少年. 最近想倒腾一下博客,看了很多现成的比较成熟的开源博客系统,自己也简单从下面几个维度总结对比了一下: star数量 ...
- 历时25天,我的博客(www.ityouknow.com)终于又活了过来
时间回到2016年的7月10号,那时候我刚刚开始正式在博客园写博客,博客园的交流氛围很好,但鉴于博客园古老的界面,同时计划创建一个自己独立的博客,毕竟自己的博客怎么折腾都行. 那时候正在研究 Spri ...
随机推荐
- http请求数据
/// <summary> /// http请求post数据 /// </summary> /// <param name=&q ...
- svn配置
svn配置 subverson.conf <Location /svn> DAV svn SVNListParentPath on SVNParentPath /var/repo Auth ...
- Kinect For Windows V2开发日志一:开发环境的配置
算是正式进军Kinect了,前段时间学的东西现在就忘了,于是从此开始记录一下. 目前为止大部分的学习资料来自于Heresy的博客,写的非常优秀,清晰明了,十分感谢.开发语言为C++,应该会一直使用,但 ...
- git and github学习笔记
1.git的状态分为working status,stage status和commit status.git diff查看的是working status和 stage status之间的不同,gi ...
- JavaScript之动态背景登陆表单
<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- CSS之transition(动画)
Transform字面上就是变形,改变的意思.在CSS中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. 下面我们一 ...
- 英特尔® 实感™ SDK 前置摄像头 (F200) 常见问题解答
原文地址 https://software.intel.com/zh-cn/articles/intel-realsense-sdk-faq-for-front-facing-camera-f200? ...
- C# lock用法
当我们使用线程的时候,效率最高的方式当然是异步,即各个线程同时运行,其间不相互依赖和等待.但当不同的线程都需要访问某个资源的时候,就需要同步机制了,也就是说当对同一个资源进行读写的时候,我们要使该资源 ...
- iOS开发那些事-iOS应用本地化-资源文件本地化
资源文件包括:图片文件.音频文件以及前文提到的Localizable.strings等文件,它们的特点是都是随着应用一起打包发布.但就本地化而言无论是图片文件还是音频文件都必须实现的步骤都是类似的,因 ...
- think in java 第四版读书笔记 第一章对象导论
很久没有碰过java了,为了项目需要以及以后找工作,还是有必要将think in java通读一遍.欢迎大家一起讨论学习 1.1抽象过程 面向对象语言的5个特性: 1.万物皆对象 任何事物都可以抽象为 ...