Question

我有一个居中的文本列，它有一个固定的宽度。但是，我希望打破<pre>（和其他一些标签）的固定宽度，它们会填满整个屏幕宽度，同时保持文本的流畅。

到目前为止，我有以下CSS：

pre {
  float: left;
  left: 0;
  padding: 1em;
  position: absolute;
}

因此，在这个HTML片段中，段落位于页面的居中列中，这是正确的。

<div class="bodice">
  <p>Some text.  Some more text.</p>
  <pre>Here's some code!</pre>
  <p>Yet more text.  And some more text.</p>
</div>

然而，<pre>内的文字没有重叠，这不是我想要的效果。具有正确的位置：与屏幕左侧对齐。

更完整的例子，在jsFiddle：http://jsfiddle.net/Jashank/VbKDP/

如何将<pre>与其余段落对齐，同时将其对齐到左侧？

Answer 1

以下代码适合我。 Check it out here

<style type="text/css">
    .bodice {
        text-align: center;
    }
    pre {
        text-align: left;
        width: 100%;
        clear: both;
        padding: 1em;
    }
</style>

<div class="bodice">
    <p>Some text.  Some more text.</p>
    <pre>Here's some code!</pre>
    <p>Yet more text.  And some more text.</p>
</div>

Answer 2

所以，经过一番讨论，我终于认为我明白了你在寻找什么。

HTML

    <div class="header">
        <h1>[jashank] / diary</h1>

        <p><small>
            <!-- &#187;&nbsp;<a href="#xkcd">xkcd</a>&nbsp;&nbsp; -->

            </small></p>
    </div>

    <div class="bodice">
        <div id="post">
            <p>I've pulled LyX's SVN sources, and compiled them with the CMake build
                system; all well and good.  However, when I attempt to start LyX:</p>

            <pre>
<strong>jashank@jashank</strong> <span style="color: #0000ee;">(pts/33)</span> <span style="color: #cd0000;">~/Software/LyX-build</span> <span style="color: #0000ee;">[0 jobs]</span> <u>!3027</u>
2011-07-03 10:49:15 &gt;&gt;&gt;&gt;&gt; bin/lyx2.1
zsh: segmentation fault (core dumped)  bin/lyx2.1
            </pre>

            <div style="clear: both;"></div>

            <p>
                Tracing the coredump doesn't help either; looks to me like the stack
                was smashed.
            </p>

            <p>
                Some time later, after an aspell glitch and a few patches to fix
                neurotic breakage:
            </p>

            <pre>
11:11:07 &lt;nox&gt; wow it built! :)
11:11:28 &lt;jashank&gt; nox: Try running bin/lyx2.1
11:12:02 &lt;nox&gt; segfaults in ucs4le_mbtowc
            </pre>

            <p>
                In other words, it doesn't appear to be a bitness issue, as it occurs
                in 32- and 64-bit modes.  That doesn't bode well.
            </p>

        </div>

    </div>

CSS

body {
    font-family: sans-serif;
    margin: 0;
    text-align: center;
}

div.header {
    text-align: center;
}

div.bodice {
    margin: 0;
    text-align: center;
    width: 100%;
}

.bodice p {
    margin: 0 auto;
    text-align: justify;
    width: 50ex;
    overflow: auto;
}

div#post pre {
    text-align: left;
    width: 100%;
    padding: 1em;
}

body {
    text-align: center;
}

h1, h2, h3, h4, h5, h6 {
    text-align: center;
}

例如

有一个jsfiddle，您可以在其中查看此解决方案。

HTML：流动<pre> with absolute positioning</pre>

2 个答案:

HTML

CSS

例如