格式化标签 HTML PHP CSS

Question

我已经离开编程很长一段时间了。令人惊讶的是，您忘记了最简单的事情。所以我试图通过制作简历生成器来预热我的网页设计/PHP。 我在 Word 中制作了简历，我想尝试模仿文档格式。

我尝试用表格来做这个，然后我把它刮掉了，因为它没有完全按照我想要的方式工作，现在我正在使用 div 和 spans。

但这更破坏了格式，所以我不知道该怎么办......

我的主要问题是让空格精确排列，就像 Microsoft Word 中的制表符一样，与其他东西在同一行。

这是我正在使用的代码

function fieldFill($fieldL, $fieldR = 'NoneAtAll'){
$numOfSpaces = 50;
echo '<div class="left">' . $fieldL . '</div>';

//if ($fieldR != 'NoneAtAll'){
//    for($i = 0; $i <= $numOfSpaces - strlen($fieldL); $i++){
//        echo '&nbsp';
//        //echo $i;
if ($fieldR != 'NoneAtAll'){
        for($i = 0; $i <= $numOfSpaces; $i++){
            echo '&nbsp';
        }
    echo '<span class="rightt">' . $fieldR . '</span>';
    echo '<br></br>';
    }
}

这里是 CSS 部分

<style>
    .rightt {margin: 0 0 0 300px;}
    .name { font-size: 22pt;}
    .sections {
        padding: 15px 0px 0px 0px;
        font-size: 12pt;
        font-weight: bold;
        text-decoration: underline;
        }
    .years {
        font-size: 12pt;
        font-weight: bold;
        /*white-space:pre*/
        }
    .jobtits {
        font-size: 12pt;
        font-weight: bold;
    }
    </style>

我知道那里已经有很好的简历生成器，但我这样做是为了练习。谢谢

我们开始吧，我想模仿这种格式

截至今天，我发现这段代码

<div id="page-container">
            <div id="leftside">
                <div class="name">Name</div>
                Address
                <br>
                City
                <br>
                State

                <div class="sections">Objective</div>
                To do good stuff!
                <div class="sections">Education</div>
                A college    
                <div class="sections">Awards</div>
                Did some good stuff
                <div class="sections">Job Experience</div>
                <div class="jobtits">Some place</div>
                Was an editor
                <div class="jobtits">Another place</div>
                Did stuff there too.
                <div class="sections">Skills</div>
            </div>
            <div id="rightside">
                <div class="name">That's my name</div>
                Mobile: 334-223-3244
                <br>
                Home: 334-223-3244
                <br>
                Email: Email@me.com

                <div class="sections">Filler</div>
                Filler
                <div class="sections">Filler</div>
                2012-1030    
                <div class="sections">Filler</div>
                Filler
                <div class="sections">Job Experience</div>
                <div class="jobtits">Jul 00 - 32</div>
                Filler
                <div class="jobtits">Everybody's heard</div>
                About the bird.
                <div class="sections">Skills</div>
            </div>
        </div> 

大部分都在工作，但仍有部分需要重叠，例如目标线。我可能需要为此制作一个新的 div/table 吧？在将其变为动态之前，我正在遍历 html 静态。

Answer 1

SPAN 标记是内联元素，因此不会对其应用边距，请改用 DIV 标记。