Problems with a wordpress repeater

Question

Problems with a wordpress repeater

Navigation

#1 by (1 votes)

0

I wanted to know how I can wait a little more the line "|" between phone and phone I mean give it more air, I tried to give it margin-left but it does not look good stylistically.

					<ul class="atencion">
	                    <?php if(have_rows('telefonos_header',4)):
	                      $raya = " | ";
	                     
	                    ?> 

	                      <?php         
	                          while(have_rows('telefonos_header',4)): 
	                          the_row();
	                      ?>
	                      <li>  
		                      <i class="icon-phone" aria-hidden="true"></i>
		                      <strong><?php the_sub_field('telefono_del_lugar',4); ?></strong>
		                      <a href="tel:<?php the_sub_field('numero_visible',4); ?>" title="Telefeno Camconnection"><?php the_sub_field('numero_visible',4); ?></a><?php echo $raya; ?>  
	                      </li>
	                    <?php
	                        $raya = ""; 
	                        endwhile; ?>
	                      
	                    <?php endif; ?>						
					</ul>

php wordpress wordpress-theme

asked by MarianoF 17.04.2018 в 01:34

source

1 answer

How do I make it from the 2nd click and find the active class, delete it filling list with foreach c sharp and .net

score 1 · Accepted Answer

There are two problems in the HTML that your code generates:

The | is located within a <ul> but not in a <li> , which is semantically incorrect, and makes it difficult to modify the style (that's why the margin-left does not give you results).
The | you are only using as a decorative element. The "good practice" is to solve these cosmetic issues using CSS.

I propose this solution, which you can implement by adapting the CSS to your page, and removing the "|" of the PHP code you published.

body { background:#444; color: #FFF; font-family: Arial, sans-serif; font-size: 12px; }
ul { list-style:none; padding-left: 0; }
li { display: inline-block; border-right: 1px solid #FFF; padding: 0 1em; }
li:last-child { border-right: 0; }

<ul>
  <li>Tel (MEX): 52 (55) 1253 7363</li>
  <li>Tel (ARG): 54 (11) 5263 3254</li>
</ul>