1

我正在尝试将电话目录构建到 CSS 下拉菜单中。我的目标是让它像典型的电话簿一样呈现，名称左对齐，电话分机/号码右对齐，如下所示：

James T. Kirk                    x1701
Mr. Spock               (123) 555-8795

HTML 非常简单：

<ul id="phone">

<li>
    Phone Category 1
    <ul>
        <li>
            <span class="phone-description">Phone Description 1</span>
            <span class="phone-number">x55555</span>
        </li>
        <li>
            <span class="phone-description">Longer Phone Description 2</span>
            <span class="phone-number">(800) 555-1234 x1701</span>
        </li>
    </ul>
</li>

...

</ul>

基本格式也相当简单：

body {background: #999;}
ul {list-style: none; margin: 0; padding: 0;}
li {margin: 0; padding: 0.4em 2em 0.4em 1em; white-space: nowrap;}

#phone {position: fixed; top: 0; left: 0;}
#phone li {background: #FFF; position: relative;}
#phone li:hover {background: #CCC;}
#phone ul {display: none; position: absolute; top: 0; left: 100%;}
#phone li:hover ul {display: block;}

.phone-number {margin-left: 2em;}

然而，事实证明，制造这些柱子是极其困难的。我尝试过使用文本对齐、浮动、绝对定位和“具有等间距 DIV 的流体宽度”中解释的 CSS 亮度。

我已经将上面的代码放在http://jsfiddle.net/HQ4ZN/2/上，并且我尝试的每个解决方案都被注释掉了。您能提供的任何帮助将不胜感激！

4

3 回答 3

2

这是你想要完成的吗？

#phone li ul li { overflow: hidden; }

.phone-description { float: left; }
.phone-number {float: right;}

http://jsfiddle.net/HQ4ZN/4/

于 2013-07-25T16:00:11.370 回答
1

只需使用 css display:table

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.category{display:table}
.category li {display:table-row}
.category span {display:table-cell}

</style>
</head>

<body>
<ul id="phone">

<li>
    Phone Category 1
    <ul class="category">
        <li>
            <span class="phone-description">Phone Description 1</span>
            <span class="phone-number">x55555</span>
        </li>
        <li>
            <span class="phone-description">Longer Phone Description 2</span>
            <span class="phone-number">(800) 555-1234 x1701</span>
        </li>
    </ul>
</li>

</ul>
</body>
</html>
于 2013-07-25T16:07:31.653 回答
0

您可能可以使用不同跨度的文本换行，这样较长的跨度不会将电话号码向下推。但我相信这会解决你的问题。您可能没有清除浮动，这就是您以前的方法不起作用的原因。

http://jsfiddle.net/feitla/HQ4ZN/5/

.phone-number {
   margin-left: 2em;
   float:right;
}
.phone-description {
   float:left; 
   width:150px;
}

#phone ul {
   display: none;  
   position: absolute;  
   top: 0; 
   left: 100%; 
   width:420px;
}

.clearfix {
   *zoom: 1;
}

.clearfix:before,
.clearfix:after {
   display: table;
   line-height: 0;
   content: "";
}

.clearfix:after {
   clear: both;
}

<ul>
    <li class="clearfix">
        <span class="phone-description">Phone Description 1</span>
        <span class="phone-number">x55555</span>
    </li>
    <li class="clearfix">
        <span class="phone-description">Longer Phone Description 2</span>
        <span class="phone-number">(800) 555-1234 x1701</span>
    </li>
</ul>
于 2013-07-25T16:03:36.050 回答