两个span并列，第二个span字数过多时换行，如何对齐？

<ul><li><span class='1'>地址：</span><span class='2'>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</span></li>
</ul>
如上面代码，class=2的内容过多换行时，怎样写css才能与class=2对齐，而不是与class=1对齐？

举报该问题

推荐答案 2013-09-11

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试</title>
<style type="text/css">
*{
    margin:0;
    padding:0;
    }
.one{
    width:360px;
    height:200px;
    border:1px solid #f00;
    margin:0 auto;
    }
.one ul{
    }
.one ul li{
    float:left;
    list-style-type:none;
    }
.span1{
    display:block;
    float:left;
    }
.span2{
    display:block;
    float:left;
    width:310px;
    text-align:justify;
    }
</style>
</head>

<body>
<div class="one">
   <ul>
      <li>
          <span class="span1">地址：</span>
          <span class="span2">点点滴滴淡定点淡定>点点滴滴淡定点淡定>点点滴滴淡定点淡定>点点滴滴淡定点淡定>点点滴滴淡定点淡定>点点滴滴淡定点淡定>点点滴滴淡定点淡定>点点滴滴淡定点淡定>点点滴滴淡定点淡定>点点滴滴淡定点淡定>点点滴滴淡定点淡定点淡定点淡定点</span>
      </li>
      <li></li>
   </ul>
</div>
</body>
</html>

温馨提示：答案为网友推荐，仅供参考

当前网址：http://33.wendadaohang.com/zd/d5RRWhRBW.html

其他回答

第1个回答 2023-07-09

如果你是想要第二个 span 的内容换行时对齐自身而不是第一个，
那么你想想如果有第三个 span 的时候，排版是不是会变得很怪？
不规范的方法是每个 span 手动换行，但是……
span 不换行，换行就多个空格。
因为 span 这些内联元素是段落内部的一部分，而 p div 这些块级元素就是段落，而段内换行会被浏览器当作空格，内联元素后换行就会会导致多个空格出来……（所以 a img 之类的也不要换行，不然都会多个空格）
这种设置真是脑残……
还有其他麻烦些的部分，但是各有弊端，最好是不要……

第2个回答 2013-09-12

问题都问的不清楚

相似回答

两个span并列,第二个span字数过多时换行,如何对齐?答：padding:0; }.one{ width:360px; height:200px; border:1px solid #f00; margin:0 auto; }.one ul{ }.one ul li{ float:left; list-style-type:none; }.span1{ display:block; float:left; }.span2{ display:block; float:left; wi...

html中多个span横向,如何实现换行自动对齐上一行?答：给span设定同样的宽度，有必要的话设置高度，如果内容超出设置的宽度可以做超出剪切的处理：overflow：hidden；这样的话上下就对齐了，而且排版也相对美观。希望能帮到您！

网页制作中,怎么样解决连续几个<span>会显示在一行,满了会自动换行的...答：SPAN是无意义的块元素也就是说他不具备自动换行的属性，可以在其样式里面写面dispaly属性设block，这样的话该span就具备div换行的属性了。推荐你看一下行内元素和块状元素的区别！span{ display:bolck}

大家正在搜

怎么让span里的文字换行 span换行 span标签换行 html中span标签可以换行吗去除span标签换行空格 span不换行加省略号 input不换行 span是个什么东西 table下的内容不换行