终于成为博客员的一员了,这是我的第一篇博文,写一个关于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 ...
随机推荐
- 安装 vsftpd
(1)安装vsftpdsudo apt-get install vsftpd (2)配置sudo vi /etc/vsftpd.conf #anonymous_enable=YESlocal_enab ...
- DML 数据操纵语言
1.INSERT(插入)语言结构 INSERT INTO table(表名)(要插入的列名) VALUES(要插入的具体值): table:要插入数据的表的表名 column[,column]:表中要 ...
- B-tree解释
1 .B-树定义 B-树是一种平衡的多路查找树,它在文件系统中很有用. 定义:一棵m 阶的B-树,或者为空树,或为满足下列特性的m 叉树:⑴树中每个结点至多有m 棵子树:⑵若根结点不是叶子结点,则至少 ...
- 剑指Offer04 重建二叉树
代码有问题 /************************************************************************* > File Name: 04_ ...
- hdu 3652 打表
思路:直接打表 #include<cstdio> #include<vector> #include<cmath> #include<iostream> ...
- 查询score中选学多门课程的同学中分数为非最高分成绩的记录。
20.查询score中选学多门课程的同学中分数为非最高分成绩的记录. select * from score a where sno in ( select sno from score group ...
- AspxGridView ComboBoxComlum列数据联动
第1步: 页面放置AspxGridView控件, 设置列ComboBox1, ComboBox2列, 拟通过ComboBox1列更新联动ComboBox2列. 两个数据列均为"ComboBo ...
- 各种LICENSE的作用--GET
许 多开发者和设计者希望把他们的作品作为开源项目共享,他们希望其他人能够利用和共享他们的代码. 而各种开源社区就是因为这个原因而充满活力.开源软件可以用于你能想象得到的任何应用程序,许多web设计人员 ...
- POJ1064
#include <iostream> #include <iomanip> #include <cmath> using namespace std; int N ...
- 英特尔® 实感™ SDK 架构
英特尔® 实感™ SDK在架构上完全不同于其前代系统 — 英特尔® 感知计算 SDK. 如果您使用英特尔感知计算 SDK 进行应用开发,会很快发现,全新的 SDK 可提供增强型编程模式,从而可通过几种 ...