Question

我在我的网站上整理了一个“联系”部分，并且很难格式化信息。我想要的是一个垂直的图标列表，文本旁边垂直对齐。

对于单行，这意味着文本行应与图标的水平轴对齐。

对于多行，第一行文本应与图标的水平轴对齐，后续行应使用第一行文本左对齐，而不是图标。我无法弄清楚如何获得这种效果。

这是我到目前为止所做的：

＆＃13;

ul {
  list-style: none;
}

p {
  display: inline;
}

a {
  font-size: 28px;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<ul>
  <li><a><i class="fa fa-5x fa-envelope"></i><p>Multi-line Address Line 1<br>Line 2</p></a></li>
  <li><a><i class="fa fa-5x fa-at"></i><p><b>email</b> at <b>yahoo</b> dot <b>com</b></p></a></li>
  <li><a href="#" target="_blank"><i class="fa fa-5x fa-linkedin"></i><p>LinkedIn</p></a></li>
  <li><a href="#" target="_blank"><i class="fa fa-5x fa-github"></i><p>GitHub</p></a></li>
</ul>

＆＃13;

这是我的代码JSFiddle。我一直在使用无序列表，禁用<li> style属性。

如何更改CSS以实现我描述的布局？

Answer 1

我已经调整了JSFiddle中的代码以满足您的要求。

.fa和p元素现在为inline-block，vertical-align为middle。

此外，我按照here的说明将fa-fw（字体真棒固定宽度）类添加到您的图标中。

以下示例：

＆＃13;

ul {
  list-style: none;
}

.fa,
p {
  display: inline-block;
  vertical-align: middle;
}

a {
  font-size: 28px;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<ul>
  <li><a><i class="fa fa-fw fa-5x fa-envelope"></i><p>Multi-line Address Line 1<br>Line 2</p></a></li>
  <li><a><i class="fa fa-fw fa-5x fa-at"></i><p><b>email</b> at <b>yahoo</b> dot <b>com</b></p></a></li>
  <li><a href="#" target="_blank"><i class="fa fa-fw fa-5x fa-linkedin"></i><p>LinkedIn</p></a></li>
  <li><a href="#" target="_blank"><i class="fa fa-fw fa-5x fa-github"></i><p>GitHub</p></a></li>
</ul>

＆＃13;

Answer 2

看起来我被击败了。大致相同，除了我删除i并将:before li放在ul { list-style: none; } li { font-size: 28px; display: inline-block; } li.address:before { font-family: fontawesome; content: '\f0e0'; margin-right: 10px; display: inline-block; } li.email:before { font-family: fontawesome; content: '\f1fa'; margin-right: 10px; } a { display: inline-block; vertical-align: middle; }之外。如果需要的话，我更喜欢用CSS复制网站的其他区域。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<ul>
  <li class="address"><a>Multi-line Address Line 1<br>Line 2</a>
  </li>
  <li class="email"><b>email</b> at <b>yahoo</b> dot <b>com</b></li>
</ul>

interface StringToString { [key: string]: string };
interface MyNested { [key: string]: StringToString };

let x: MyNested = {
    'username': {
        required: 'Please enter your username.'
    },
    'passwordGroup': {
        ocMatchFields: 'Passwords do not match'
    },
    'passwordGroup.password': {
        required: 'Please enter your password'
    },
    'passwordGroup.confirmPassword': {
        required: 'Please confirm your password'
    }
}

在字体真棒图标旁边垂直对齐并对齐文本

2 个答案: