Question

我正在为虚拟航空公司建立一个网站。我有一个为我的topnav div设计的列表，但是我只想要我正在使用的另一个div的常用列表。我想要使用的另一个div是jQuery选项卡。麻烦的是，它调用列表定义来自.usual，这是jQuery选项卡的主要div，所以我的列表没有点，并且不像列表那样运行，只是在一行并且打破了格式。

.usual li { 
    list-style:none; 
    float:left; 
}

HTML ...

<div class="usual">
  <ul class="idTabs">
    <li><a href="#idTab1" class="selected">Introduction</a></li>
    <li><a href="#idTab2">Recruitment</a></li>
    <li><a href="#idTab3">Management</a></li>
    <li><a href="#idTab4">Operating Procedures</a></li>
    <li><a href="#idTab5">Airline Rules & Policies</a></li>
  </ul>

    <div class="pilot_handbook" id="idTab1">
    <p>Hello there</p>

    <br/>
    <div class="msg-yellow"><strong>Tip:</strong> Navigate the handbook by the tabs on the top. These allow you to access different sections of the handbook.</div>
    <br/>

    </div>

    <div class="pilot_handbook" id="idTab2">
    <p><strong>1.1 Testing<br />
  </strong><br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<ul class="basic_list">
  <li>Testing 1</li>
  <li>Testing 2</li>
  <li>Testing 3</li>
</ul>
    </div>

然后我尝试通过在ul上创建一个类来清除.usual li上的样式。然而它并没有起作用，我有点失落......

.basic_list {
    list-style-type: circle;
    float: none;
}

Answer 1

而不是：

.usual li { ... }

使用：

.idTabs li { ... }

因为它更适合您要设置样式的区域。

Answer 2

您的<div class='usual'>未关闭。

为清晰起见编辑：您的div.usual包含两个列表，因此它们将获得您为.usual中的列表设置的样式。只更改一个div的样式或将第二个列表移到div.usual

之外

Answer 3

只需在选择器中指定课程idTabs：

.usual .idTabs li { 
    list-style:none; 
    float:left; 
}

我该如何解决这个问题 - 设计两个列表

3 个答案: