如何在页脚中稍微移动文本

时间:2020-10-14 17:01:06

标签: css padding margin footer

我有一个页脚,我希望其中的所有文本稍微向左移动,以便看起来更居中。如果我添加一个边距或更改填充,它们将更改所有,而我不想这样做。我只想将整个文本(链接)稍微移动一点。

.footer {
  background: #3E3D3D;
  padding: 0.625rem 0.75rem;
}

.footer_list {
  /*ul*/
  list-style: none;
  text-align: center;
  margin: 0;
}

.footer_lists {
  display: inline-block;
  padding: 0px 1rem;
}

.footer_lists a {
  color: white;
  text-decoration: none;
  font-family: 'Oswald', sans-serif;
}

.footer_lists a:hover,
.footer_lists a:active {
  color: silver;
}
<footer class="footer">
  <ul class="footer_list">
    <li class="footer_lists"><a href="about.html">About Us</a></li>
    <li class="footer_lists"><a href="Contact.html">Contact</a></li>
    <li class="footer_lists"><a href="privacy.html">Privacy Policy</a></li>
  </ul>
</footer>

1 个答案:

答案 0 :(得分:0)

padding-inline-start标记上,默认情况下,40px CSS属性值设置为.footer { background: #3E3D3D; padding: 0.625rem 0.75rem; } .footer_list { /*ul*/ list-style: none; text-align: center; margin: 0; padding-inline-start: 0; } .footer_lists { display: inline-block; padding: 0px 1rem; } .footer_lists a { color: white; text-decoration: none; font-family: 'Oswald', sans-serif; } .footer_lists a:hover, .footer_lists a:active { color: silver; }。因此,您需要重置此值。

<footer class="footer">
  <ul class="footer_list">
    <li class="footer_lists"><a href="about.html">About Us</a></li>
    <li class="footer_lists"><a href="Contact.html">Contact</a></li>
    <li class="footer_lists"><a href="privacy.html">Privacy Policy</a></li>
  </ul>
</footer>
DataTable(
            columns: [
              DataColumn(
                label: Text("cod"),
                numeric: false,
              ),
              DataColumn(
                label: Text("Nome"),
                numeric: false,
              ),
              DataColumn(
                label: Text("rem"),
                numeric: false,
              ),
              DataColumn(
                label: Text("qtd"),
                numeric: false,
              ),
              DataColumn(
                label: Text("adc"),
                numeric: false,
              ),
            ],
            rows: controller.menuList
                .map(
                  (item) => DataRow(
                    cells: [
                      DataCell(
                        Container(
                          width: 0,
                          child: Text(item.pos),
                        ),
                      ),
                      DataCell(Container(
                        width: 60,
                        child: Text(item.title),
                      )),
                      DataCell(
                        Container(
                          width: 30,
                          child: ButtonTheme(
                            minWidth: 10,
                            child: FlatButton(
                                padding: EdgeInsets.all(2.0),
                                color: Colors.redAccent,
                                onPressed: () {},
                                child: Icon(Icons.remove)),
                          ),
                        ),
                      ),
                      DataCell(
                        Container(
                          width: 20,
                          child: Text(item.qtd),
                        ),
                      ),
                      DataCell(
                        Container(
                          width: 30,
                          child: ButtonTheme(
                            minWidth: 10,
                            child: FlatButton(
                                padding: EdgeInsets.all(2.0),
                                color: Colors.green,
                                onPressed: () {},
                                child: Icon(Icons.add)),
                          ),
                        ),
                      ),
                    ],
                  ),
                )
                .toList(),
          ),
        );
      });