最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

html - Flexbox: can't put textarea on a new line - Stack Overflow

programmeradmin1浏览0评论

I am trying to float a preformatted block of text to the right of a page, keeping the text aligned to the left of the block so that I get a right-aligned paragraph containing left-justified text. This works quite well:

<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>

The problem is that when I add a textarea to this (for example, inserting <textarea>foo</textarea> after the first line of the <pre> para), the line breaks before and after the textarea are ignored.

It works when I wrap the <pre> in a <div> and then apply the style to the <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>

but unfortunately the HTML is not under my control, so I can't do this. I could do this with a table if I was able to control the HTML; and I can't find a way to do it with float:right because the surrounding text appears alongside the floated para.

Is there any way to make this work as I had expected, changing only the CSS?

Edit: here are some images, using the code shown above:

The original code:

After adding a textbox:

The desired effect using an enclosing div:

I am trying to float a preformatted block of text to the right of a page, keeping the text aligned to the left of the block so that I get a right-aligned paragraph containing left-justified text. This works quite well:

<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>

The problem is that when I add a textarea to this (for example, inserting <textarea>foo</textarea> after the first line of the <pre> para), the line breaks before and after the textarea are ignored.

It works when I wrap the <pre> in a <div> and then apply the style to the <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>

but unfortunately the HTML is not under my control, so I can't do this. I could do this with a table if I was able to control the HTML; and I can't find a way to do it with float:right because the surrounding text appears alongside the floated para.

Is there any way to make this work as I had expected, changing only the CSS?

Edit: here are some images, using the code shown above:

The original code:

After adding a textbox:

The desired effect using an enclosing div:

Share Improve this question edited Jan 19 at 20:49 user1636349 asked Jan 19 at 20:09 user1636349user1636349 5481 gold badge5 silver badges23 bronze badges 4
  • Is there a way that I can post a screenshot? Or, plan B: Copy the code at the topy and save it in a .html file, then open it with your browser. Then insert a textarea after the first line. Then try the second chunk of example code. – user1636349 Commented Jan 19 at 20:34
  • Ah, thanks. I've done that now. – user1636349 Commented Jan 19 at 20:50
  • 1 I'm curious about the context here. Without some idea of how this is going to fit in with other content on the page it's hard to offer suggestions. – Paulie_D Commented Jan 19 at 21:29
  • It's a separate paragraph, hence I can't use float:right, but I want it to take up minimum space on the right with a blank area to the left without losing the left justification. – user1636349 Commented Jan 20 at 9:39
Add a comment  | 

1 Answer 1

Reset to default 4

Rather than using flexbox to shift the pre element, just use a margin.

pre {
  margin-inline-start: auto; /* or margin-left if you prefer */
  width: fit-content;
}
  <pre>
    A preformatted para with a
    <textarea>foo</textarea>
    and various stuff
    inside it.
  <pre>

发布评论

评论列表(0)

  1. 暂无评论