CSS问题希望<li><a></a><span></span></li>在同一行

Posted 2023-03-28

.Default_centerUl

margin-left: 3%;
margin-top: 1%;
font-size: 12px;
line-height: 24px;

.Default_centerUl li

border-bottom: 1px solid #E7E7DF;
width: 90%;

.Default_centerUl li a

color: Black;

.Default_centerUl li a:hover

text-decoration: underline;

.Default_centerUl span

float: right;

<ul class="Default_centerUl"><li><a href="#">评定专家语音电话应答流程及通知短信使用须知答流程及通知短信使用须知</a><span>08-30</span></li></ul>如何使<a>中内容居左且<li>有项目符号，<span>居右，重要的是使其在同一行上

参考技术A span 已经右浮动了，还少一步 把span放到文字的前面就好了。可以试试！
<li><span>2012-8-13</span><a href="#">风水世家</a> </li>追问

非常感谢，起作用了，再问一句通常这个是用table做比较好吗？

追答

对于页面加载速度和大小或者 不建议用table，因为大量的使用table会造成页面浮肿， 打个比方 用ul 页面大小是50K 而table 可能会是70K 页面每次加载多了20K ，如果你的页面每天有10W人访问的话，天呐！你有多少流量就白白流失了。呵呵！ 对于搜索引擎也不是太友好。

本回答被提问者采纳 参考技术B 　　<ulclass="Default_centerUl"><listyle="text-align: center"><ahref="#">评定专家语音电话应答流程及通知短信使用须知答流程及通知短信使用须知</a><span>08-30</span></li></ul>
修改完毕 参考技术C 。。。那你现在是什么样子的，多行吗.? 要在同一行，就得浮动。float追问

现在运行出来时好时坏，要是给<a>用float<li>的项目符号就跑到后面去了

追答

那你的li也float.

参考技术D 你把自己给绕进去了 你弄个table 一行3列 不就可以了 把这么简单的问题弄这么复杂！追问

我看了其他网站确实用的table,但现在不想做大改动

追答

那你就给加个padding 拉开距离就好了

Css Center ul li inside nav

【中文标题】Css Center ul li inside nav

【英文标题】：

【发布时间】：2016-01-03 00:01:54

【问题描述】：

如何在导航中将带有 li 标签的水平 ul 居中：

        <nav>
            <ul>
                <li>
                    <a href="" title=""></a>
                </li>
                <li>
                    <a href="" title=""></a>
                </li>
                <li>
                    <a href="" title=""></a>
                </li>
            </ul>
        </nav>

【参考方案1】：

如何居中呢？水平垂直？你想改变<li>的方向吗？

这里有一个可能是您想要的代码笔。

http://codepen.io/anon/pen/wKdgyd

【讨论】：

谢谢我帮助了我，但刚刚找到了一个使它们水平的解决方案

你应该告诉我们你做了什么，当有人遇到类似问题时你可以帮助他们。

【参考方案2】：

找到解决办法

html:

<div class="main">
        <nav>
            <ul>
                <li>
                    <a href="" title=""></a>
                </li>
                <li>
                    <a href="" title=""></a>
                </li>
                <li>
                    <a href="" title=""></a>
                </li>
            </ul>
        </nav>
</div>

还有css：

.main nav 
    width: auto;
    height: 80px;
    margin: 0 auto 0 auto;
    display: block;

.main nav ul 
    height: auto;
    margin: 21px auto 0 auto;


.main nav ul li 
    float: left;
    margin: 19px 0 12px;
    width: 33.3%;
    text-align: center;