Question

我目前正在编程自己的网站，而导航栏有问题。我正在尝试制作一个小的导航栏，其徽标位于左侧，而超链接位于右侧，但是无论执行结果如何，都是徽标放错了位置，而超链接位于徽标的顶部，或者徽标是放在我想要的地方，但超链接不是。预先感谢。

body{
    margin: 0;
    padding: 0;
    background-color:#000000;
}
p, a, h1, h2, h3, h4, h5, h6, ul{
    color:#ffffff;
}
#topbar{
    height: 50px;
    background-color: #242424;
    width:100%;
    display:block;
}
#tb_hyperlink{
    display:inline;
    left:0;
  }
ul{
    display:inline-block;
    list-style: none;
    position:fixed;
  }
li{
    display: inline;
  cursor: pointer;
  padding: 20px;
  margin-left: 1px;
  }
a{
  text-decoration: none;
  }  

#space{
    padding: 0 10px;
  }

<div id="topbar">         > 
 <div id="tb_logo">
<a href="https://acrazytown.com">
    <img src="logo_small.png"/>
        </a>   
        <ul id="tb_hyperlink">  
            <li><a href="https://acrazytown.com/">HOME</a></li>
            <li class="space">|</li>
            <li><a href="https://acrazytown.com/my-projects">MY PROJECTS</a></li>
            <li class="space">|</li>
            <li><a href="https://acrazytown.com/news/">NEWS</a></li>
            <li class="space">|</li>
            <li><a href="https://status.acrazytown.com/">STATUS</a></li>
            <li class="space">|</li>
            <li><a href="https://acrazytown.com/contact">CONTACT</a></li>
    </ul>
 </div>
   
</div>

Answer 1

下面是使用不同的CSS代码执行此操作的代码

我已经评论了一些代码用法，您同样希望使用它的最佳宽度。

CATCH

body{
    margin: 0;
    padding: 0;
    background-color:#000000;
}
p, a, h1, h2, h3, h4, h5, h6, ul{
    color:#ffffff;
}
#topbar{
    background-color: #242424;
    width:100%;
    position: fixed;
    z-index: 99;
}
ul{
    list-style: none;
    margin: 0;
  }
li{
  display: inline-block;
  cursor: pointer;
  padding: 10px 10px;
  font-size:14px;
  }
a{
  text-decoration: none;
  display:inline-block
  }  
div#tb_logo {
    height: 50px;
}
#space{
    padding: 0 10px;
}

/* Style 1 Using Flex*/
#topbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap:nowrap;
}

/*Style 2 
#tb_logo, #tb_hyperlink {
    display: inline-block;
}
*/

/*Style 3 
div#tb_logo {
    float: left;
}
#tb_hyperlink {
    float: right;
    padding-top: 20px;
}
*/

Answer 2

您可以使用if(t1.getText().toString().equals("")// t1 is Edittext(class) object { Toast.makeText(MainActivity.this, "my Message", Toast.LENGTH_LONG).show(); } else { //do ur operation }控制类，使用.class控制ID。将#id更改为#space，它看起来像这样：

.space

body{
    margin: 0;
    padding: 0;
    background-color:#000000;
}

p, a, h1, h2, h3, h4, h5, h6, ul{
    color:#ffffff;
}

#topbar{
    height: 50px;
    background-color: #242424;
    width:100%;
    display:block;
}

#tb_hyperlink{
    display:inline;
    left:0;
}

ul{
    display:inline-block;
    list-style: none;
    position:fixed;
}

li{
    display: inline;
  cursor: pointer;
  padding: 20px;
  margin-left: 1px;
}

a{
  text-decoration: none;
}  

.space{
    padding: 0 10px;
}

另外，请以一种美观的方式设置代码格式，以帮助自己和他人。不要只是在行前随意插入制表符和空格。

Answer 3

<div id="topbar">
 <ul id="tb_hyperlink">  
            <a href="https://acrazytown.com">
    <img src="logo_small.png">
   </a><li><a href="https://acrazytown.com/">HOME</a></li>
            <li class="space">|</li>
            <li><a href="https://acrazytown.com/my-projects">MY PROJECTS</a></li>
            <li class="space">|</li>
            <li><a href="https://acrazytown.com/news/">NEWS</a></li>
            <li class="space">|</li>
            <li><a href="https://status.acrazytown.com/">STATUS</a></li>
            <li class="space">|</li>
            <li><a href="https://acrazytown.com/contact">CONTACT</a></li>
    </ul>
</div>

CSS

body{
    margin: 0;
    padding: 0;
    background-color:#000000;
}
p, a, h1, h2, h3, h4, h5, h6, ul{
    color:#ffffff;
}
#topbar {
    height: 50px;
    background-color: 
    #242424;
    width: 100%;
    display: block;
}
#tb_hyperlink{
    display:inline;
    left:0;
  }
ul {
    display: inline-block;
    padding-left: 0;

}
li {
    display: inline;
    cursor: pointer;
    padding: 10px;
    margin-left: 1px;
    font-size: 14px;
}
a{
  text-decoration: none;
  }  

#space{
    padding: 0 10px;
  }

如何制作在左侧带有徽标的单杠

3 个答案: