Question

我正在尝试将手机目录构建到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;}

然而，证明制作柱子非常困难。我尝试过使用text-align，float，absolute positioning和“Fluid width with equally spaced DIVs”中解释的CSS亮度。

我已将上述代码放在http://jsfiddle.net/HQ4ZN/2/，同时我的每个尝试过的解决方案都已注释掉了。我们非常感谢您提供的任何帮助！

Answer 1

这是你想要完成的吗？

#phone li ul li { overflow: hidden; }

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

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

Answer 2

只需使用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>

Answer 3

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

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>

在CSS菜单中创建列

3 个答案: