Question

我正在学习如何编写HTML和CSS代码，我决定在此过程中创建自己的网站。

我的问题是：我如何将较小的文本与较大的对象对齐，例如，链接到我网站上不同页面的链接整齐地以我的全名对齐，链接与我的全名的开头和结尾齐平？

我知道描述它可能有点令人困惑，所以这是我的意思的图像：

Sample image

有什么建议吗？谢谢！

Answer 1

无论标题长度如何，您都可以近似外观和设计，但最后，CSS不提供您需要的精确排版工具，一旦您知道，您将不得不以这种或那种方式微调百分比实际文本的长度。

Sample Jsfiddle

HTML：

<div id="container">
    <h1>Large Title Here Etc</h1>
    <div id="sub">
        <span>music</span>
        <span>film</span>
        <span>web</span>
        <span>photo</span>
    </div>
</div>

CSS：

body {
    text-align: center;
}

#container {
    display: inline-block;
}

h1 {
    font-size: 2em;
}

#sub {
    font-size: 1em;
    display: table;
    width: 120%;
    box-sizing: border-box;
    margin: 0 -10%;
}

#sub span {
    display: table-cell;
    padding: 0 2%;
}

Answer 2

将flush指向我的全名的开头和结尾

在设计网站时，不要以这种方式思考。这将导致无休止的头痛和挫折，因为它取决于浏览器渲染（并可能渲染错误），用户的字体大小，用户的字体以及您无法控制的其他因素的负载。而不是追求“像素精度”，这个想法只是让它在大多数事情上看起来都很好。

在设计此类内容时，首先考虑标记。你实际写的是什么结构？在您的关联图片中，Full Name看起来就像一个标题（可能是h1），而像这样的菜单通常在样式无序列表（ul）中完成。下面是我如何制作类似于图像内容的示例。

这是标记：

<div id="container">
    <h1>Full Name</h1>
    <ul>
        <li>music</li>
        <li>film</li>
        <li>web</li>
        <li>photo</li>
    </ul>
</div>

和使用的CSS，带有注释：

#container { border: 1px solid; }
h1 { 
    margin-bottom: 0;
    text-align: center; 
}
ul { 
    margin: 0.5em;
    /* remove default padding inserted by browser */
    padding-left: 0;
    /* no bullets */
    list-style-type: none;
    /* this works on inline objects, not just text */
    text-align: center;
}
li {
    /* hybrid of inline and block; obeys text-align */
    /* Also note this does not work in IE <9. Workarounds exist. */
    display: inline-block;
    padding: 3px;
}

以下是最终结果：http://jsfiddle.net/3PLgz/1/

将多个较小的单词与一个较大的单词对齐？

2 个答案: