终于成为博客员的一员了,这是我的第一篇博文,写一个关于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 ...
随机推荐
- 最初步的正则表达式引擎:生成nfa
这个版本修改了前面版本的两个个bug. 第一个:识别到字符集的时候,只是将name_number加1,却并不对reg_pattern_table[name_number]进行初始化. 第二个:识别到假 ...
- Table of Contents - TCP/IP
网络访问层 Ethernet II 网际层 IP IPv4 报文格式 ICMP ICMP 报文分析 ping: 向网络主机发送 ICMP ECHO_REQUEST 包 ARP ARP 过程 arp 命 ...
- PAT1014——福尔摩斯的约会
大侦探福尔摩斯接到一张奇怪的字条:“我们约会吧! 3485djDkxh4hhGE 2984akDfkkkkggEdsb s&hgsfdk d&Hyscvnm”.大侦探很快就明白了,字条 ...
- C# 输出24小时格式时间
比如 MessageBox.Show(DateTime.Now.ToString("yyyy-MM-dd hh:mm:ss")); 会输出 2014-4-3 5:08:4[1 ...
- SQL批量修改表名
SELECT NAME FROM SYS. ALL_OBJECTS WHERE TYPE= 'U' ORDER BY MODIFY_DATE DESC --查询所有表名 SELECT NAME FRO ...
- PictureBox控件鼠标进入的手形改变和提示
PictureBox控件载入了图片后,如果要设置其为链接作用的功能,一般需要当鼠标移动到其上时鼠标自动变为手形以提示用户此时可以点击,如果图形无法方便辨识链接的具体功能,最好此时给与一定提示. 1.鼠 ...
- UI2_UIGesture
// // ViewController.h // UI2_UIGesture // // Created by zhangxueming on 15/7/9. // Copyright (c) 20 ...
- 解决Toad for Oracle显示乱码问题
1.查看一下数据库字符集: 使用下面语句:Select userenv('language') from dual;或者:Select name, value$ from props$;查看. 查看完 ...
- (转)Centos5.5安装MONO2.10.8和Jexus 5.0开启Linux平台.net应用新篇章
注:本文只做本人记录使用,也可供大家参考,有兴趣的可以一起讨论. 安装步骤 1.yum –y update 2.安装Mono源码安装需要的库 yum -y install gcc gcc-c++ bi ...
- 7款纯CSS3实现的炫酷动画应用
1.纯CSS3实现人物摇头动画 这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分 ...