Echo элементы списка и выровнять их

У меня есть PHP эхо трех переменных полей:Echo элементы списка и выровнять их

<li> 
    <mark> <?php while($toprow2 = sqlsrv_fetch_array($stmt3)) { 
    echo $toprow2['overallRank']  ."&nbsp;&nbsp;&nbsp;".$toprow2['EmployeeName']  ."&nbsp;&nbsp;&nbsp;".$toprow2['Total_points_Rewarded']."<br/>";} ?> 
    </mark> 
</li>

Среди этих трех переменных в списке, я хочу, чтобы выровнять первое поле «overallRank» налево , «EmployeeName» в центр и «Total_points_Rewarded» до крайнего правого.

Ниже приведен код, который я пытался для первого поля:

<li> 
    <mark> <?php while($toprow2 = sqlsrv_fetch_array($stmt3)) { 
          echo "<div style = "text-align=left" ."$toprow2['overallRank'] "</div>"."&nbsp;&nbsp;&nbsp;".$toprow2['EmployeeName'] ."&nbsp;&nbsp;&nbsp;".$toprow2['Total_points_Rewarded']."<br/>";} ?> 
    </mark> 
</li>

, когда я использую три дивы:

echo "<div style ='text-align:left'>" . $toprow2['overallRank'] . "</div><div style ='text-align:centre'>" . $toprow2['EmployeeName'] . "</div><div style ='text-align:right'>" . $toprow2['Total_points_Rewarded'] . "</div>";

Я не в состоянии выровнять их: Текущий сценарий:

первый блок ранг, то имя и последние точки - три поля, которые я пытаюсь повторить здесь.

CSS используется для описанной выше ситуации:

li mark { 
 
display: inline-block; 
 
    justify-content: space-between; 
 
} 
 
li mark div { 
 
     display: block; 
 
     margin: 4px; 
 
     padding: 5px; 
 
     min-height: 100px; 
 
     border: 1px solid #eebb55; 
 
     border-radius: 7pt; 
 
     background: grey; 
 
}

@Abhay имеет большое решение: CSS Эйнт работать здесь, хотя

текущей ситуации:

источник

2016-12-19 Anonymous

Использование flex:

echo "<div class='parent-div'><div class='rank'>" . $toprow2['overallRank'] . "</div><div class='name'>" . $toprow2['EmployeeName'] . "</div><div class='points'>" . $toprow2['Total_points_Rewarded'] . "</div></div>";

Ваш CSS:

.parent-div{ 
    display: -webkit-flex; /* Safari */ 
    display: flex; 
} 
.rank,.name,.points{ 
    width:33%; 
} 
.name{ 
    text-align: center; 
} 
.points{ 
    text-align: right; 
}

Малый работая например:

<!DOCTYPE html> 
<html> 
<head> 
    <title>test</title> 
    <style> 
    .parent-div{ 
     display: -webkit-flex; /* Safari */ 
     display: flex; 
    } 
    .rank,.name,.points{ 
     width:33%; 
    } 
    .name{ 
     text-align: center; 
    } 
    .points{ 
     text-align: right; 
    } 
    </style> 
</head> 
<body> 
    <div class="parent-div"> 
     <div class='rank'>Rank</div> 
     <div class='name'>Name</div> 
     <div class='points'>Points</div> 
    </div> 

    <div class="parent-div"> 
     <div class='rank'>Rank</div> 
     <div class='name'>Name</div> 
     <div class='points'>Points</div> 
    </div> 

    <div class="parent-div"> 
     <div class='rank'>Rank</div> 
     <div class='name'>Name</div> 
     <div class='points'>Points</div> 
    </div> 
</body> 
</html>

Если продолжить span:

echo "<div class='parent-div'><span class='rank'>" . $toprow2['overallRank'] . "</span><span class='name'>" . $toprow2['EmployeeName'] . "</span><span class='points'>" . $toprow2['Total_points_Rewarded'] . "</span></div>";

Попробуйте CSS:

.parent-div{ 
     display: -webkit-flex; /* Safari */ 
     display: flex; 
    } 
    .rank,.name,.points{ 
     display:block; 
     width:33%; 
    } 
    .name{ 
     text-align: center; 
    } 
    .points{ 
     text-align: right; 
    }

Пожалуйста, помните, что я дал класс: parent-div для всех трех контейнеров div.

Я надеюсь, что это помогает

источник

2016-12-19 13:10:34 Learner

спасибо за вход. Вы использовали «.name» дважды. не проблема.Но его не читал css –

@Jane Augustine, исправил ответ. – Learner

Я исправил его и попробовал свои коды. Он не умеет читать css.Everything выглядит так прекрасно. Не знаю, почему. Все равно спасибо. Бог благословит. –

Почему бы вам не использовать

li mark { 
 

 
    display: inline; /* don't use inline-block */ 
 
    justify-content: space-between; 
 
} 
 
li mark div { 
 
     float: left; /* here you put the float so it can be after the first li mark */ 
 
     display: block; 
 
     margin: 4px; 
 
     padding: 5px; 
 
     min-height: 100px; 
 
     border: 1px solid #eebb55; 
 
     border-radius: 7pt; 
 
     background: grey; 
 
} 
 

 
li mark div:first-child { 
 
     float: left; /* it will put your first div in left side */ 
 
} 
 
li mark div:last-child { 
 
     float: right; /* it will be in the right side */ 
 
}

Кроме того, почему бы не удалить ширину.Например, вместо того, чтобы быть без него в классах выше, это означает, что ширина 100%, вы можете настроить его на width: 50% на половину.

источник

2016-12-19 13:12:07

спасибо за ввод. –

Нет проблем. Рад, что смог помочь. –

Echo элементы списка и выровнять их

ответ

Смежные вопросы