相关疑难解决方法(0)

我希望flex项目居中,但是当我们有第二行时,将5(从下面的图像)下调到1并且不在父项中居中.

这是我的一个例子:

ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
}
li {
  list-style-type: none;
  border: 1px solid gray;
  margin: 15px;
  padding: 5px;
  width: 200px;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

http://jsfiddle.net/8jqbjese/2/

我需要在div中居中一个左对齐文本块,但我需要将文本块的视觉宽度放在居中而不是块本身.

在许多情况下,这可能是相同的,但想想一个div相当狭窄的情况(想想移动宽度)和文本太长而无法放在一条线上,所以它需要溢出.

在下面的示例中,我将文本块显示为浅蓝色来说明,但实际上它们将与父div(白色)颜色相同.在使用的任何文本中也没有换行符.

在1a中,文本只有一行,并且小于文本块的最大宽度,因此我可以将文本块设置为文本的宽度,并且没有问题.

但是,在2a中,文本比最大宽度长,因此包裹到下一行.这样做的结果是可见文本块不再出现居中.

如何仅使用HTML和CSS 将这两种情况显示为1b和2b？

编辑1:似乎每个人都在告诉我如何实现1a和2a中的情况,但我已经有了.我想实现1b和2b的情况.

编辑2:我使用的代码与David在其链接中提供的代码基本相同(http://jsfiddle.net/davidThomas/28aef/).对文本区域使用颜色只是为了说明这一点.如果将其更改为白色(http://jsfiddle.net/28aef/2/),您可以看到文本块不再看起来居中(即左右边距不相等)

inline-block如果由于屏幕宽度导致内容换行,如何获得适合其内容宽度的元素？

<!-- parent inline-block -->
<div style='display: inline-block;'>
    <div style='display: inline-block; width:200px;'></div>
    <!--
        If this child line breaks, 
        two 200px wide blocks are stacked vertically.
        That should make the parent width 200px,
        but the parent stays much wider than that
    -->
    <div style='display: inline-block; width:200px;'></div>
</div>

我想不出如何用这句话来说这听起来很容易,但我把一个简单的JSFiddle放在一起说明.

#wide {
  position: relative;
  width: 100%;
  border: 1px solid black;
  padding: 5px;
}
#narrow {
  position: relative;
  width: 175px;
  border: 1px solid black;
  padding: 5px;
}
.wrap {
  display: inline-block; …

我有一个div它有inline-block一个max-width设置,以及一些可能包含在内部的文本内容.我的问题是div始终采用最大宽度,但只有文本包装.我希望div尽可能采取最小的宽度,以回应文本包装.

div {
 
  max-width: 120px;
  width: auto;
  display: inline-block;

  border: 1px solid black;    
  padding: 0.2rem;
  
}

<div>Reallylongword test</div>

实际结果:

期望的结果:

这也不能用于限制width父项.

我搜索过,我的代码正在使用这种方法.我也试过这个(小提琴),但它不起作用.我知道使用word-break: break-all,但这真的很难看.

谢谢.

更新

我正在尝试制作一个导航栏.它目前使用的是flexbox,而不是display: inline-block.我只是(或者至少我以为我做过)将问题隔离到单个nav元素.显然,并非所有答案都符合我原来的导航栏问题.对不起.如果我没有得到实际问题的答案,我会保留原帖.

不是最好的头衔,但无论如何......

我有一个带有max-width一些文本的元素.

如果文本长度超过一行,我得到这个:

----------------------------
|My text here, hello       |
|everyone!                 |
----------------------------

换句话说,它占据了最大的最大宽度,但由于单词向下移动,右侧有一个空的空间.

有没有办法让它发生这种情况呢？

---------------------
|My text here, hello|
|everyone!          |
---------------------

我的想法是给出一个自适应div宽度.当我只有一个项目时,宽度应该与容器div中的项目相同.

有关如何做到这一点的任何建议？

示例:http://codepen.io/tomasfrancisco/pen/PNvLLw

HTML:

<div id="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<div id="container">
  <div class="item"></div>
</div>

CSS:

#container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 200px;
  padding: 10px;
  margin: 20px;
  background-color: blue;
}
#container .item {
  width: 80px;
  height: 50px;
  background-color: red;
  margin: 10px;
}

我试图通过使用鼠标拖动列分隔符(或调整占位符大小)来动态调整css网格布局框的大小.

我resize: horizontal;在nav元素上设置了调整大小,当我在元素的右下角拖动小调整大小手柄时它会被调整大小,但相邻列的宽度不会自动调整而导致重叠.这是一个破碎的codepen.

HTML:

<main>
 <nav>#1</nav>
 <header>#2</header>
 <section>#3</section>
</main>

CSS:

main {
    display: grid;
    border: 3px dotted red;
    grid-gap: 3px;
    grid-template-columns: 200px 1fr;
    grid-template-rows: 100px 1fr;
    height: 100%;
}

nav {
    grid-column: 1;
    grid-row: 1;
    grid-row: 1 / span 2;
    resize: horizontal;
    overflow: scroll;
    border: 3px dotted blue;
}

我希望css网格引擎自动处理这种情况,但显然它没有.

我尝试使用jquery-ui可调整大小,但它似乎不适用于css网格.

我正在研究如何通过将grid属性grid-template-columns/rows:设置为动态值来使用jquery来完成它,但是不清楚如何通过resize句柄调整元素大小来捕获抛出的事件.jquery resize事件仅在window对象上触发,而不是在dom元素上触发.

在不必处理像dragstart/dragend这样的低级鼠标事件的情况下,可能有什么办法呢？

我希望摆脱媒体查询,只是使用flexbox来解决我的问题,但我不确定这是否可行.随着窗口变小,我希望列缩小,直到它们达到最小宽度.一旦它们击中,中间列将跳下来进行包裹.

我认为我的问题可以归结为这一点 - 当它包装时,它可以检测到弹性盒吗？如果是这样,我可以提示它改变严格的CSS包装项目的顺序吗？

这里是一个codepen的我"米尝试使用媒体查询来实现.

.wrapper {
  display: flex;
  justify-content: center;
  margin: 5px;
  flex-wrap: wrap;
}

.red {
  background-color: red;
  height: 240px;
  margin: 5px;
  width: 500px;
  order: 0;
}

.yellow {
  background-color: yellow;
  margin: 5px;
  height: 240px;
  min-width: 240px;
  max-width: 400px;
  flex: 1;
  order: 1;
}

.blue {
  background-color: blue;
  height: 240px;
  margin: 5px;
  min-width: 350px;
  max-width: 400px;
  flex: 1;
  order: 2;
}

@media (max-width:1130px) {
  .yellow {
    order: 4;
  }
}

<div class="wrapper">
  <div class="red"></div>
  <div class="yellow"></div> …

如何在使用时指定最大列数,当display: grid;内容对于空间来说太宽(或小于最小大小)时它会自动断开？有没有办法在没有媒体查询的情况下做到这一点？

例如,我有以下内容,当内容空间不足时,不会分成单列模式.

#grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1em;
}

#grid > div {
  background-color: #ccddaa;
}

<div id="grid">
  <div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text …

很简单,有没有办法知道一个元素是否因为flex-wrap它而被包裹,因此它的风格不同？