Question

我的网站上有多个下拉列表（选择框） - 我希望不同地对齐下拉列表，因为我希望某个下拉列表应该位于一个页面的中央，但是在另一个页面上，右侧会出现一个不同的选择框

我的设计师正在度假，所以我想亲自尝试一下，有人会帮我这个，我对css定义部分不是很好，但我可以玩现有的CSS

css已经写成了这样的

select 
{
background: #F8F8F8;
border: 1px solid #CCCCCC;
padding: 2px;
}

我在像这样的页面上修改了它

select 
{
background: #F8F8F8;
border: 1px solid #CCCCCC;
padding: 2px;
float:left;
margin-left:20px;
}

当我看到结果时，它在页面上看起来很好但是当我移动到内页时，选择框移动到不同的地方

如何在不同页面上以不同方式使用css ???

感谢

Answer 1

select标记是一般标记。您为select标记提供的任何CSS样式都将应用于您网站上的每个选择下拉列表（假设使用相同的样式表）

如果您希望选择下拉菜单的显示方式不同，则需要为其指定一个ID，以便定位特定的ID。

例如

#select1{ 
float:right;
}

#select2{
float:left;
}

在这种情况下，ID为select1的选择字段将向右浮动，select2将向左浮动

Answer 2

很可能浮动：左边会造成伤害。但你可以给他们不同的风格：

<select class="first"></select>
<select class="second"></select>

<style>
.first{
    // some stuff
}
.second{
    // some stuff
}
</style>

或给他们ID并相应地定义两个样式：

<select id="first"></select>
<select id="second"></select>


<style>
#first{
    // some stuff
}
#second{
    // some stuff
}
</style>

Answer 3

我猜你最好的选择是

为每个页面上的<html>标记分配不同的类

示例：

<html class="page1">
  <head>
     ....
  </head>

  <body>
     ....
     <select>
     ....
     </select>
  </body>
</html>

如果您有'page1.html'，'page2.html'等页面，那么就这样做......

select{
background: #F8F8F8;
border: 1px solid #CCCCCC;
padding: 2px;
}

.page1 select{
float:left;
margin-left:20px;
}

.page2 select{
float:left;
margin-left:40px;
background: blue;
}

通过这种方式，您可以将所有常用样式放在一个组中，并将组中的各个样式用于自己的样式。希望这会有所帮助。

如何在两个不同的页面上使用css类进行选择下拉列表

3 个答案: