Question

<div class="links1">
    <ul style="float:left; position:absolute; top:115px; right:200px; display:inline;">
        <li><a href="#">Warranty & Support</a></li>
        <li><a href="#">Shipping Info</a></li>
        <li><a href="#">Privacy Policy</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</div>

我希望这些链接在导航栏中水平排列，但display: inline;无法在ul标记中使用，请提示一些解决方案???

Answer 1

float和display:inline不要在一起。
您必须float或inline li而不是ul。

在display:inline上使用dsiplay:inline-block或li的摘录：

注意：仅使用inline会阻止li作为块元素运行，从而阻止您设置尺寸等样式。

＆＃13;

div.links1 ul {
  list-style: none;
  margin: 0; padding: 0;
}

div.links1 ul li {
  display: inline-block;
}

＆＃13;

<div class="links1">
  <ul>
    <li><a href="#">Warranty & Support</a></li>
    <li><a href="#">Shipping Info</a></li>
    <li><a href="#">Privacy Policy</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</div>

＆＃13;

使用float上的li代码段：

注意：float时必须有足够的边距。这是因为inline-block将标记中的空白保留原样，因此li之间会有一个小的分隔。

＆＃13;

div.links1 ul li {
  display: block;
  float: left;
  margin: 0px 8px;
}

＆＃13;

<div class="links1">
  <ul>
    <li><a href="#">Warranty & Support</a></li>
    <li><a href="#">Shipping Info</a></li>
    <li><a href="#">Privacy Policy</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</div>

＆＃13;

Answer 2

尝试：

<head>
<style>li {display: inline}</style>
</head>
<body>
<div class="links1">
    <ul >
        <li><a href="#">Warranty & Support</a></li>
        <li><a href="#">Shipping Info</a></li>
        <li><a href="#">Privacy Policy</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</div>

Answer 3

只需将inline应用于li：

li{
    display: inline;
}

http://jsfiddle.net/u8shhkem/

Answer 4

请参阅此小提琴：http://jsfiddle.net/o3apjcku/3/

无需使用float，li应为inline。

Answer 5

使用display: inline-block

＆＃13;

.links1 ul li {
  position: relative;
  display: inline-block;
  vertical-align: top;
}

＆＃13;

<div class="links1">
  <ul style="">
    <li><a href="#">Warranty & Support</a>
    </li>
    <li><a href="#">Shipping Info</a>
    </li>
    <li><a href="#">Privacy Policy</a>
    </li>
    <li><a href="#">About Us</a>
    </li>
    <li><a href="#">Contact Us</a>
    </li>
  </ul>
</div>

＆＃13;

Answer 6

检查 http://liveweave.com/cxNlbu

   <div class="links1">
    <ul class="hiii">
    <li><a href="#">Warranty & Support</a></li>
    <li><a href="#">Shipping Info</a></li>
    <li><a href="#">Privacy Policy</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
    </ul>
    </div>

CSS

ul.hiii li{display:inline-block;float:left}

显示内联在ul标签中不起作用

6 个答案: