相关疑难解决方法(0)

我想要一个具有特定高度的垂直菜单.

每个孩子必须填写父母的高度并且具有中间对齐的文本.

孩子的数量是随机的,所以我必须使用动态值.

Div .container包含一个随机数的children(.item),它们总是必须填充父级的高度.为了实现这一点,我使用了flexbox.

为了使文本链接与中间对齐,我正在使用display: table-cell技术.但使用桌面显示需要使用100%的高度.

我的问题是.item-inner { height: 100% }在webkit(Chrome)中无效.

1. 这个问题有解决方法吗？
2. 或者是否有一种不同的技术可以使所有.item填充父级的高度与文本垂直对齐到中间？

这里的示例jsFiddle,应该在Firefox和Chrome中查看

.container {
  height: 20em;
  display: flex;
  flex-direction: column;
  border: 5px solid black
}
.item {
  flex: 1;
  border-bottom: 1px solid white;
}
.item-inner {
  height: 100%;
  width: 100%;
  display: table;
}
a {
  background: orange;
  display: table-cell;
  vertical-align: middle;
}

<div class="container">
  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>

  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div> …

我尝试fieldset用display: flex和设置元素的样式display: inline-flex.

但是,它不起作用:flex表现得像block,inline-flex表现得像inline-block.

这在Firefox和Chrome上都会发生,但奇怪的是它适用于IE.

这是一个错误吗？我无法fieldset在HTML5和CSS Flexible Box Layout规范中找到任何特殊行为.

fieldset, div {
    display: flex;
    border: 1px solid;
}

<fieldset>
    <p>foo</p>
    <p>bar</p>
</fieldset>
<div>
    <p>foo</p>
    <p>bar</p>
</div>

我正在尝试创建一个高度为"22px"的按钮,按钮内的文本将垂直对齐在按钮的中心.我尝试了一切,但却找不到怎么做.

如何才能做到这一点？

更新: 这是我的代码:

CSS:

.test1 label {
    float: left;
    clear: left;
    width:31%;
    margin-right:-2px;
}
.test1 input {
    float:left;
    width:69%;
    margin-right:-2px;
}
.testbutton {
    float:left;
    margin-left: 10px;
    height: 22px;
    line-height: 22px;
    text-align:center;
    background-color:#fbfbfb;
    border:1px solid #b7b7b7;
    color:#606060;
    cursor:pointer;
    display:inline-block;
    font:bold 12px/100% Arial, sans-serif;
}

HTML:

<div class="test1">
<label for="test" title="test">test</label>                                
<input style="width:18px; float:left;" type="checkbox" name="test" id="test" tabindex="5" />
<input class="testbutton" id="testbutton" style="width:60px;"type="button" value="Import" /></div>

为什么flexbox与fieldset其他非div标签无法正常工作？我希望它们在div示例flex-direction: row;中排列在一起,就像在flexbox中一样.然而fieldset是力施加宽度给他们,我不明白为什么.

HTML

<fieldset>
    <div>fieldset flexbox</div>
    <div>1</div>
    <div>2</div>
</fieldset>

<div id="parentdiv">
    <div>div flexbox<div>
    <div>3</div>
    <div>4</div>
</div>

CSS:所有元素都设置为display: flex;

http://jsfiddle.net/c5BB5/1/

或者,更一般地说,是否有任何无法设计的元素display:grid？

考虑:

button,
div {
  display: grid;
  grid-template-columns: 50px 50px;
}


/* Nevermind these, they're just for a consistent display */

button,
div {
  border: 0;
  background-color: gray;
  color: black;
  width: 100px;
  text-align: center;
  font-family: sans-serif;
  font-size: 14px;
  padding: 0;
}

Button:
<button>
  <span>A</span>
  <span>B</span>
</button>
<br> 
Div:
<div>
  <span>A</span>
  <span>B</span>
</div>

在JsFiddle上尝试一下

这是Firefox(61.0.1)中的结果:

这是Chrome(68.0.3440.106)中的结果:

Chrome似乎不喜欢我正在尝试使用display:grid按钮.这只是一个错误吗？或者是以某种方式打算？

我这里有棘手的问题.我想在一个按钮内垂直对齐我的文字

<button id="rock" onClick="choose(1)">Rock</button>

这是我的CSS

button {
    font-size: 22px;
    border: 2px solid #87231C;
    border-radius: 100px;
    width: 100px;
    height: 100px;
    color: #FF5A51;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
button:active {
    font-size: 22px;
    border: 2px solid red;
    border-radius: 100px;
    width: 100px;
    height: 100px;
}

你可以在这里查看http://jsfiddle.net/kA8pp/.我希望文本在底部.非常感谢你!

编辑:我无法解释它,所以这是它的图片http://i.imgur.com/WGKltUa.png :)

从我几十年来手工编码HTML的经验来看,我已经了解到<form>,<fieldset>这些只是一些block级别的元素<div>.从CSS的角度来看,它们在定位和尺寸方面的表现相同.(请耐心等待,我在这里忽略像IE6这样的老浏览器.)....或者我认为....

*在我继续之前,我必须声明我在大多数时间使用Firefox进行开发和测试.

我参加了一个有很多<form>和<fieldset>整个地方的项目.为了简化我的问题,我有类似的东西:

<form>
  <fieldset>
    <div class="gridChild">...</div>
    <div class="gridChild">...</div>
    <div class="gridChild">...</div>
  </fieldset>
</form>

我想让gridChild divs在各个列的布局中.所以我有CSS的东西:

fieldset {
  display: grid;
  grid-template-columns: 50px 2fr 6fr 6fr auto ....;
} 

它奏效了.它在我的屏幕上完美显示了这些列...它适用于Firefox,Android甚至Edge.截止日期已逾期.我很匆忙,我没有在Chrome上测试它.我认为如果Firefox和Edge工作正常,那么Chrome也应该工作,对吧？或者我认为......后来,我发现这对Chrome无效.Chrome上的网格布局完全被忽略.我花了几天时间来调试问题.

经过几个不眠之夜,我发现这display:grid不起作用<fieldset>.它必须应用于<div>Chrome才能运行.这对我来说是惊喜,因为我一直在做这么多的CSS定位,就像漂浮,绝对定位等在跨浏览器的方式<form>,并<fieldset>和他们一直表现得就像<div>所有的时间.但为什么不进行网格布局呢？这是Chrome的错误,还是这种行为设计得像那样？因为我发现这不是Firefox,Edge和Android的问题.

我能想到的一个简单的解决方法是包装<div>内部<fieldset>,如下所示:

<form>
  <fieldset><div class="gridParent">
    <div class="gridChild">...</div>
    <div class="gridChild">...</div>
    <div class="gridChild">...</div>
  </div></fieldset>
</form>

但正如我之前说的,我已经<form>和<fieldset>所有的地方.如果我可以避免更改HTML结构,那将是最好的.我写这篇文章是为了寻找一个CSS解决方案/ hack,所以我不必重复编写数百条HTML行.

我在一个容器中有一些html元素彼此相邻display:inline-flex.

这适用于按钮元素,但只要我尝试添加input type="text"元素,文本框就会放在按钮下方(仅限Internet Explorer 11;不确定IE10或更低版本).

它在Firefox,Chrome甚至Edge中按预期工作(与按钮位于同一行的文本框).

如何让IE正确显示？

有关完整的html和css代码,请参阅jsFiddle来说明问题:https://jsfiddle.net/vm2kcwd9/1/

.container {
  height: 2em;
}

.container>* {
  height: 100%;
  display: inline-flex;
  vertical-align: top;
  justify-content: center;
  align-items: center;
}

<div class="container">

  <button>test</button>
  <button>test 2</button>
  <button>test 3</button>
  <input type="text" value="hello" />

</div>

这对我来说似乎很奇怪。你可以看到我们有一个简单的 details 元素，它应该是水平运行的。但事实并非如此。grid似乎也行不通。

为什么？我没有看到规范中关于这些元素的布局模型有任何不同的任何内容。

details {
	display: flex;
	flex-direction: row;
}

<details open>
	<summary>foo</summary>
	<div>bar</div>
	<div>baz</div>
</details>

我希望使用Flexbox来对齐按钮中的svg和文本,并且所有功能在Chrome和Safari中运行良好,但在Firefox中似乎存在问题.

这个codepen应该现场演示这个问题.请注意,我将https://github.com/mastastealth/sass-flex-mixin/blob/master/_flex.scss作为codepen中的外部CSS工作表.

http://codepen.io/dominicchapman/pen/EgNgoq

SCSS如下:

.Button {
  border: 0 none;
    height: 32px;
    padding: 0 16px;
    font-size: 14px;
    background-color: orange;
    color: white;

  .Icon {
        fill: white; 
    }

    &:hover, &:active {
        background: red;
    }
}

.Button__icon {
  @include inline-flex;
  @include align-items(center);
  .Icon {
    margin-right: 11px;
    height:16px;
    width:6px
  }
}

任何帮助将不胜感激.提前致谢.

我想显示一个带图像和文字的按钮.文本和图像必须居中并位于同一行/行上.

在Firefox中,图像和文本始终位于不同的行上.我怎么解决这个问题？

这就是我所拥有的:

button {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: stretch;
    align-items: center;
}

button img {
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
}

button span {
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
}

的jsfiddle

我在显示方面遇到了一些问题:在Safari和iOS Safari中都有flex.Safari存在对齐问题,iOS Safari具有对齐和大小问题.这是Safari中的预期或有效错误吗？

编辑:此外,按钮内的子SVG的高度百分比也不起作用.这适用于所有其他浏览器.我用另一个更高级的SVG元素示例,我添加了一个锚点来与按钮进行比较.这里有更高级的例子

我的简单例子

HTML:
<div class="flex">
  <div class="col col-1">
    <button class="sub-col">
      <span class="span"></span>
    </button>
    <div class="sub-col">2</div>
    <div class="sub-col">3</div>
  </div>
  <div class="col col-2"></div>
  <div class="col col-3"></div>
</div>


CSS:
.flex {
  display: flex;
  flex-direction: column;
  height: 80vh;
  background: #666666;
  position: fixed;
  width: 100%;
}

.col {
  display: inherit;
  flex: 1 1 auto;
  background: #ccffcc;
}
.col-1 {
  flex: 0 0 10vh;
  background: #ffcccc;
}
.col-3 {
  flex: 0 0 10vh;
  background: #ccccff;
}

.sub-col {
  display: inherit;
  flex: 0 …