不遵守弹性方向

时间：2019-03-06 16:05:38

标签： html css flexbox

我已经为某个应用创建了设置列表。所有设置的容器都是一个flex元素，并且flex的方向设置为column。现在，我使用.option类创建了一个div，并放置了一个h2和一个<select>。我将.option容器设置为显示为flex并将方向设置为行，但是它不起作用！他们堆积！

我尝试制作h2和<select>内联块，我尝试将每一个的宽度设置为50％，什么也没有。我将附有标签的屏幕截图，以及相关代码的html和css片段。

#SettingsOverlay {
  display: block;
  position: fixed;
  z-index: 3;
  width: 100%;
  height: 100%;
  background-color: rgba(48, 48, 48, 0.7);
  background-size: cover;
}

#SettingsOverlay div {
  width: 80%;
  height: 80%;
  background-color: purple;
  margin: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

#Options {
  display: flex;
  flex-direction: column;
}

.option {
  display: flex;
  flex-direction: row;
}

.option h2 {
  display: inline-block;
  width: 50%;
}

.option select {
  display: inline-block;
  width: 50%;
}
<div id='SettingsOverlay'>
  <div>
    <h1>Settings</h1>
    <div id='Options'>
      <div class='option'>
        <h2>Timezone</h2>
        <select>
          <option value="GMT-12">GMT-12</option>
          <option value="GMT-11">GMT-11</option>
          <option value="GMT-10">GMT-10</option>
          <option value="GMT-9">GMT-9</option>
          <option value="GMT-8">GMT-8</option>
          <option value="GMT-7">GMT-7</option>
          <option value="GMT-6">GMT-6</option>
          <option value="GMT-5">GMT-5</option>
          <option value="GMT-4">GMT-4</option>
          <option value="GMT-3">GMT-3</option>
          <option value="GMT-2">GMT-2</option>
          <option value="GMT-1">GMT-1</option>
          <option value="GMT">GMT</option>
          <option value="GMT+1">GMT+1</option>
          <option value="GMT+2">GMT+2</option>
          <option value="GMT+3">GMT+3</option>
          <option value="GMT+4">GMT+4</option>
          <option value="GMT+5">GMT+5</option>
          <option value="GMT+6">GMT+6</option>
          <option value="GMT+7">GMT+7</option>
          <option value="GMT+8">GMT+8</option>
          <option value="GMT+9">GMT+9</option>
          <option value="GMT+10">GMT+10</option>
          <option value="GMT+11">GMT+11</option>
          <option value="GMT+12">GMT+12</option>
        </select>
      </div>
    </div>
  </div>
</div>

Picture of UI not working

4 个答案:

答案 0 :(得分：2)

您的规则.option被#SettingsOverlay div覆盖，将其转换为#SettingsOverlay > div或使用父ID .option #SettingsOverlay .option的CSS特异性

  

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

     

Specificity是浏览器确定哪些CSS属性值与某个元素最相关的方法，因此将被应用。特异性基于由不同种类的CSS选择器组成的匹配规则。

     

特异性如何计算？

     

Specificity是应用于给定CSS声明的权重，它由匹配选择器中每种选择器类型的数量决定。当多个声明具有相同的特异性时，将在CSS中找到的最后一个声明应用于该元素。特异性仅在多个声明针对同一元素时适用。根据CSS规则，直接定位的元素将始终优先于元素从其祖先继承的规则。

#SettingsOverlay {
 /* display: none;*/
  position: fixed;
  z-index: 3;
  width: 100%;
  height: 100%;
  background-color: rgba(48, 48, 48, 0.7);
  background-size: cover;
}

#SettingsOverlay div {
  width: 80%;
  height: 80%;
  background-color: purple;
  margin: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

#Options {
  display: flex;
  flex-direction: column;
}

#SettingsOverlay  .option {
  display: flex;
  flex-direction: row;
}

.option h2 {
  display: inline-block;
  width: 50%;
}

.option select {
  display: inline-block;
  width: 50%;
}
<div id='SettingsOverlay'>
  <div>
    <h1>Settings</h1>
    <div id='Options'>
      <div class='option'>
        <h2>Timezone</h2>
        <select>
          <option value="GMT-12">GMT-12</option>
          <option value="GMT-11">GMT-11</option>
          <option value="GMT-10">GMT-10</option>
          <option value="GMT-9">GMT-9</option>
          <option value="GMT-8">GMT-8</option>
          <option value="GMT-7">GMT-7</option>
          <option value="GMT-6">GMT-6</option>
          <option value="GMT-5">GMT-5</option>
          <option value="GMT-4">GMT-4</option>
          <option value="GMT-3">GMT-3</option>
          <option value="GMT-2">GMT-2</option>
          <option value="GMT-1">GMT-1</option>
          <option value="GMT">GMT</option>
          <option value="GMT+1">GMT+1</option>
          <option value="GMT+2">GMT+2</option>
          <option value="GMT+3">GMT+3</option>
          <option value="GMT+4">GMT+4</option>
          <option value="GMT+5">GMT+5</option>
          <option value="GMT+6">GMT+6</option>
          <option value="GMT+7">GMT+7</option>
          <option value="GMT+8">GMT+8</option>
          <option value="GMT+9">GMT+9</option>
          <option value="GMT+10">GMT+10</option>
          <option value="GMT+11">GMT+11</option>
          <option value="GMT+12">GMT+12</option>
        </select>
      </div>
    </div>
  </div>
</div>

答案 1 :(得分：0)

此问题的原因是由于CSS选择器的优先级。 ID的优先级最高，其次是类，属性和伪类，然后是哪些元素和伪元素。

您的#SettingsOverlay div css选择器具有比#Options选择器和.option选择器更高的优先级-并且因为它会影响{{1 div的}}，它会将id的{​​{1}}放在每个div上。

要解决此问题，您可以向div添加一个类（这会降低其优先级），并使用该类代替SettingsOverlay作为css选择器，如下例所示。

如果您不确定CSS的优先级，可以使用Keegan's Specificity calculator进行检查。

flex-direction
column

答案 2 :(得分：0)

#SettingsOverlay div的特异性为（1、0、1），.option的特异性为(0, 1, 0)，这意味着flex-direction中的#SettingsOverlay div为优先。

您可以尝试将#SettingsOverlay div更改为#SettingsOverlay > div，以便仅将其应用于直接子级（而不是其中的任何子级）。避免使用ID的最佳做法是因为它们具有很强的特异性。

有关特殊性的更多信息，请参见https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity。

答案 3 :(得分：0)

您的问题是由于var contains = sports.OfType<Running>().Any()在主要#SettingsOverlay的所有降级div上造成了不良行为。

如果您更改此规则的名称，则应按预期输入。 另外，我将一些参数添加到#SettingsOverlay div div中。 

.option
#SettingsOverlay {
				  /*display: none;*/
				  position: fixed;
				  z-index: 3;
				  width: 100%;
				  height: 100%;
				  background-color: rgba(48, 48, 48, 0.7);
				  background-size: cover;
				}

				#Options {
				  width: 80%;
				  height: 80%;
				  background-color: purple;
				  margin: auto;
				  padding: 10px;
				  display: flex;
				  flex-direction: column;
				}

				#Options {
				  display: flex;
				  flex-direction: column;
				}

				.option {
				  display: flex;
				  flex-direction: row;
				  justify-content: space-between;
				  align-items: center;
				}

				.option h2,
				.option select {
					display: inline-block;
					width: 50%;
				}

相关问题
最新问题