text-align中的问题：表

时间：2017-09-07 12:11:46

标签： html css

我做了这个：

https://jsfiddle.net/6wb2xedc/ 

.price-table {
  display: table;
  width: 630px;
  height: 233px;
  border-collapse: collapse;
  margin-top: 55px;
  margin-left: 51px;
}

.price-table ul {
  display: table-row;
}

.price-table__content {
  display: table-row-group;
  border: 1px #e5e5e5;
  text-align: center;
}

.price-table__content ul {
  display: table-row;
}

.price-table__content ul li {
  display: table-cell;
  border: 1px solid #e5e5e5;
  padding: 5px;
}

.price-table__content ul li:not(:nth-of-type(1)) {
  padding-left: 138px;
}

.price-table__content ul li:first-child {
  padding-left: 2px;
  padding-right: 6px;
  text-align: left;
}

.price-table__content ul li:nth-child(3) {
  padding-left: 153px;
}

.price-table__content ul li:nth-child(4) {
  padding-left: 140px;
}

.price-table__content ul li:nth-child(2) {
  padding-left: 142px;
  padding-top: 42px;
}

.price-table__content-third-row {
  display: table-footer-group;
  border: 1px solid #e5e5e5;
  text-align: center;
}

.price-table__headers {
  display: table-header-group;
  text-align: center;
  line-height: 30px;
  font-family: "Open Sans";
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  text-transform: uppercase;
}

.price-table__headers ul li {
  list-style-type: none;
  display: table-cell;
  border: 1px solid #e5e5e5;
  padding: 13px;
}

.price-table__headers ul li:first-child {
  padding-left: 107px;
  border: none;
}

.price-table__headers ul li:nth-child(2) {
  padding-left: 65px;
}

.price-table__headers ul li:last-child {
  padding-left: 71px;
}

.price-table__headers ul li:nth-child(3) {
  padding-left: 55px;
}

.price-table__headers ul li:not(:nth-of-type(1)) {
  background-color: #283645;
}

.price-table__headers ul li span {
  text-align: center;
}

.price-table__headers__column {
  display: table-column;
}

.price-table__headers__column-group {
  display: table-column-group;
}
<section class="price-block">
  <article class="price-table">
    <div class="price-table__column-group">
      <div class="price-table__column"></div>
      <div class="price-table__column"></div>
      <div class="price-table__column"></div>
    </div>
    <div class="price-table__column-last">
      <div class="price-table__headers-content">
        <header class="price-table__headers">
          <ul>
            <li></li>
            <li>
              <div><span>База</span> <span class="price-table__item-value"><br>1,99 USD</span></div>
            </li>
            <li><span>Стандарт</span> <span class="price-table__item-value"><br>3,99 USD</span></li>
            <li><span>Анлим</span> <span class="price-table__item-value"><br>9,99 USD</span></li>
          </ul>
        </header>
      </div>
      <div class="price-table__content">
        <ul class="price-table__content-fist-row">
          <li>Розовый фильтр</li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
        <ul class="price-table__content-second-row">
          <li>Смайлики</li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
        <ul class="price-table__content-third-row">
          <li>Комментарии</li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
  </article>
</section>

问题在于我不能使用

将文本放在跨度中（类“price-table__headers”） 
  text-align:center;

或使用边距移动它：在块内部向左或向右移动而不拉伸表格单元格。

2 个答案:

答案 0 :(得分：0)

这有点不对劲。在.price-table__headers ul li

上有一些不必要的嵌套和填充

Here's a JSFiddle fixing most of that up.

＆＃13;
＆＃13; 
.price-table {
  display: table;
  width: 630px;
  height: 233px;
  border-collapse: collapse;
  margin-top: 55px;
  margin-left: 51px;
}
.price-table ul {
  display: table-row;
}
.price-table__content {
  display: table-row-group;
  border: 1px  #e5e5e5;
  text-align: center;
}
.price-table__content ul {
  display: table-row;
}
.price-table__content ul li {
  display: table-cell;
  border: 1px solid #e5e5e5;
  padding: 5px;
}
.price-table__content ul li:not(:nth-of-type(1)) {
  padding-left: 138px;
}
.price-table__content ul li:first-child {
  padding-left: 2px;
  padding-right: 6px;
  text-align: left;
}
.price-table__content ul li:nth-child(3) {
  padding-left: 153px;
}
.price-table__content ul li:nth-child(4) {
  padding-left: 140px;
}
.price-table__content ul li:nth-child(2) {
  padding-left: 142px;
  padding-top: 42px;
}
.price-table__content-third-row {
  display: table-footer-group;
  border: 1px solid #e5e5e5;
  text-align: center;
}
.price-table__headers {
  display: table-header-group;
  text-align: center;
  line-height: 30px;
  font-family: "Open Sans";
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  text-transform: uppercase;
}
.price-table__headers ul li {
  list-style-type: none;
  display: table-cell;
  border: 1px solid #e5e5e5;
  padding: 13px;
}
.price-table__headers ul li:first-child {
  padding-left: 107px;
  border: none;
}
.price-table__headers ul li:not(:nth-of-type(1)) {
  background-color: #283645;
}
.price-table__headers ul li span {
  text-align: center;
}
.price-table__headers__column {
  display: table-column;
}
.price-table__headers__column-group {
  display: table-column-group;
}
＆＃13; 
    <section class="price-block">
  <article class="price-table">
    <header class="price-table__headers">
      <ul>
        <li></li>
        <li><div><span>База</span> <span class="price-table__item-value"><br>1,99 USD</span></div></li>
        <li><span>Стандарт</span> <span class="price-table__item-value"><br>3,99 USD</span></li>
        <li><span>Анлим</span> <span class="price-table__item-value"><br>9,99 USD</span></li>
      </ul>
    </header>
    <div class="price-table__content">
      <ul class="price-table__content-fist-row">
        <li>Розовый фильтр</li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <ul class="price-table__content-second-row">
        <li>Смайлики</li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <ul class="price-table__content-third-row">
        <li>Комментарии</li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </article>
</section>
＆＃13;
＆＃13;
＆＃13;

下次再同意有关更小问题的评论。

答案 1 :(得分：0)

你好span是一个内联元素，这就是为什么它没有采取保证金等问题似乎在这里：

.price-table__headers ul li:nth-child(2) {
padding-left: 65px;

}

而不是这个你可以使用类似的东西：

.price-table__headers ul li:nth-child(2) {
padding-left: 30px;
padding-right: 30px;
}

这是fiddle

相关问题
最新问题