Flexbox：无法将文本区域放在新行上

Question

我试图将预格式化的文本块浮动到页面的右侧，使文本与块的左侧对齐，以便获得包含左对齐文本的右对齐段落。这效果很好：

<html>
<head>
  <style>
    pre {
      display: flex;
      justify-content: flex-end;
      text-align: left;
    }
  </style>
</head>
<body>
  <pre>
    A preformatted para with
    various stuff
    inside it.
  </pre>
</body>
</html>

问题是，当我向其中添加文本区域时（例如，在

<textarea>foo</textarea>

段落的第一行之后插入

<pre>

），文本区域之前和之后的换行符将被忽略。

当我将

<pre>

包裹在

<div>

中，然后将样式应用到

<div>

时，它就起作用了：

<html>
<head>
  <style>
    div {
      display: flex;
      justify-content: flex-end;
      text-align: left;
    }
  </style>
</head>
<body>
<div>
  <pre>
    A preformatted para with a
    <textarea>textarea</textarea>
    and other stuff
    inside it.
  </pre>
</div>
</body>
</html>

但不幸的是 HTML 不在我的控制之下，所以我不能这样做。如果我能够控制 HTML，我可以使用表格来完成此操作；我找不到使用

float:right

执行此操作的方法，因为周围的文本出现在浮动段落旁边。

有什么方法可以让这个工作如我所料，只改变CSS？

编辑：这里有一些图像，使用上面显示的代码：

原代码：

添加文本框后：

使用封闭 div 所需的效果：

Answer 1

将布局转变为 Flexbox 列。

pre {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: left;
}

pre {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: left;
}

<pre>
  A preformatted para with a
  <textarea>textarea</textarea>
  and other stuff
  inside it.
</pre>

Flexbox：无法将文本区域放在新行上

问题描述投票：0回答：1

1个回答

最新问题

Flexbox：无法将文本区域放在新行上

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1