在链接之间添加空格（没有答案正在运行）

Question

I am having a very large amount of difficulty trying to do what would seem a simple task. I am trying to add white space in between the log in and sign up links along with a | however anything I've tried, resulted in absolutely nothing happens or my links showing up a line down and half a page over.

Any help at all would be greatly appreciated :) I have thoroughly searched the board and anything I have tried hasn't seemed to work at all (I was able to add white space thanks to Daniel but it has brought up an other problem where my text-decoration css settings no longer work for the two links) (i had a brain fart. i fixed the css to corrispond to the proper divs and now what daniel suggested works)

<?php
$envelope = '<img src="images/note_dead.jpg" width="22" height="12" alt="Notes" title="This envelope is for logged in members">';
$loginLink = '<a href="login.php">Log In</a>';
$Sgnplnk = '<a href="signup.php">Sign Up</a>';
if($user_ok == true) {
    $sql = "SELECT notescheck FROM users WHERE username='$log_username' LIMIT 1";
    $query = mysqli_query($db_conx, $sql);
    $row = mysqli_fetch_row($query);
    $notescheck = $row[0];
    $sql = "SELECT id FROM notifications WHERE username='$log_username' AND date_time > '$notescheck' LIMIT 1";
    $query = mysqli_query($db_conx, $sql);
    $numrows = mysqli_num_rows($query);
    if ($numrows == 0) {
        $envelope = '<a href="notifications.php" title="Your notifications and friend requests"><img src="images/note_still.jpg" width="22" height="12" alt="Notes"></a>';
    } else {
        $envelope = '<a href="notifications.php" title="You have new notifications"><img src="images/note_flash.gif" width="22" height="12" alt="Notes"></a>';
    }
    $Sgnplnk = '<a href="user.php?u='.$log_username.'">'.$log_username.'</a>';
    $LoginLink = '<a href="logout.php">Log Out</a>';

}
?>
<div id="pageTop">
  <div id="pageTopWrap">
    <div id="pageTopLogo">
      <a href="http://www.itsyourquarter.com"><img src="images/logo.fw.png" alt="logo" title="itsyourquarter"></a>  
    </div>
  <div id="pageTopRest">
    <div id="menu1">
      <div>
        <div id="envalg">
          <div id="env">
        <?php echo $envelope;  ?>
          </div>
          <div id="sgnup">
        <?php echo $Sgnplnk; ?>
          </div>
          <div id="lgin">
        <?php echo  $loginLink; ?>
          </div>
        </div>
      </div>
      </div>
        <div id="menu2">
          <div>
            <a href="http://www.itsyourquarter.com"><img src="images/home.fw.png" alt="home" title="home"></a>
          </div>
          <div id="topbarBottomtext">
            <a href="#">menu_item_1</a>
            <a href="#">menu_item_2</a> 
          </div>                
        </div>
    </div>
  </div>
</div>

and the css is as follows

   body {margin: 0px; font-family:Verdana, Geneva, sans-serif; font-size:14px; }
#pageTop {
    background:url(headersliver.png) repeat-x;
    height:60px;    
}
#pageTop > #pageTopWrap {
    width: 1000px;
    margin: 0px auto;
    height: 60px;   
}
#pageTop > #pageTopWrap > #pageTopLogo {
    float:left;
    height: 60px;
    width: 61px;
}
#pageTop > #pageTopWrap > #pageTopRest {
    float:left;
    height: 60px;
    width: 892px;   
}
#pageTop > #pageTopWrap > #pageTopRest >#menu1{
    height: 30px;
}
#pageTop > #pageTopWrap > #pageTopRest >#menu1 > div {
    margin-top: 8px;
    padding: 4px;
    text-decoration:none
}
#pageTop > #pageTopWrap > #pageTopRest >#menu1 > div > #envalg {
    padding: 2px;
    float:right;
    color:#0F0;
    text-decoration:none;
}
#pageTop > #pageTopWrap > #pageTopRest >#menu1 > div > #envalg > #env {
    padding: 2px;   
    float:right;
    color:#0F0;
    text-decoration:none;
}
#pageTop > #pageTopWrap > #pageTopRest >#menu1 > div > #envalg > #sgnup {
    padding: 2px;   
    float:right;
    color:#0F0;
    text-decoration:none;
}
#pageTop > #pageTopWrap > #pageTopRest >#menu1 > div > #envalg > #sgnup > a {
    padding: 2px;   
    float:right;
    color:#0F0;
    text-decoration:none;
}
#pageTop > #pageTopWrap > #pageTopRest >#menu1 > div > #envalg > #sgnup > a:hover{
    color:#F00;
}
#pageTop > #pageTopWrap > #pageTopRest >#menu1 > div > #envalg > #lgin {
    padding: 2px;   
    float:right;
    color:#0F0;
    text-decoration:none;
}

#pageTop > #pageTopWrap > #pageTopRest >#menu1 > div > #envalg > #lgin > a {
    padding: 2px;   
    float:right;
    color:#0F0;
    text-decoration:none;
}
#pageTop > #pageTopWrap > #pageTopRest >#menu1 > div > #envalg > #lgin > a:hover{
    color:#F00;
}

#pageTop > #pageTopWrap > #pageTopRest >#menu2{
    float:left;
    height: 30px;
    padding: 5px;
}
#pageTop > #pageTopWrap > #pageTopRest >#menu2 > div {
    margin-top: -7px;
    float:left; 
}
#pageTop > #pageTopWrap > #pageTopRest >#menu2 > div > a {
    float:left;
    display:block;
    text-decoration:none;
    margin: 0px 6px;
    color:#F00; 
}
#pageTop > #pageTopWrap > #pageTopRest >#menu2 > div > a:hover {
    color:#0F0;
}
#pageTop > #pageTopWrap > #pageTopRest >#menu1 > div {
    padding: 2px;
}
#pageTop > #pageTopWrap > #pageTopRest >#menu1 > div > enva {
    padding: 2px;
}
#pageTop > #pageTopWrap > #pageTopRest >#menu1 > div > sgnp {
    padding: 2px;
}
#pageTop > #pageTopWrap > #pageTopRest >#menu1 > div > lgn {
    padding: 2px;
}
#pageMiddle {
    height: 900px;
    margin: 0px auto;
    width: 1000px;

}
#pageMiddle > #if {
    width: 250px;
    margin-left: auto;
    margin-right:auto;
    border-style:solid;
    border-color:#000
    border-width: 2px;
    background:#CCC
}
#pageBottom {
    background:#000;
    padding: 12px;
    font-size: 12px;
    color:#F00;
    text-align:center;
}

Answer 1

You might try to insert a non-breaking space between those :

$Sgnplnk = '<a href="user.php?u='.$log_username.'">'.$log_username.'</a>';
echo ' &nbsp; ';
$LoginLink = '<a href="logout.php">Log Out</a>';

try this Dougie Fuoco