如何在css设计中将方块放在垂直线上？

Question

我是新手与css，并试图使一个非常简单的页面作为设计。

这是我想做的一个页面

​

正如你在这张图中看到的，左边的所有区块:更多，商品，额外服务，媒体都非常整洁。最下面的一排非常直。

但这是我的。

​

​

如你所见，左边的区块:更多，商品，额外服务，媒体并不是设计的那样。

下面是我在styles.css上的代码：

#nav .subnav {
position: absolute;
}

这是我在index.html上的代码

<li>
   <a href="">More</a>
   <ul class="subnav">
           <li><a href="">Merchandise</a></li>
           <li><a href="">Extras</a></li>
           <li><a href="">Media</a></li>
    </ul>
 </li>

你能给我一些解决这个问题的建议吗？非常感谢您的宝贵时间。

Answer 1

如果您只想将.subnav放置在其主导航项目<li>的正下方，并让它们在左侧对齐显示，请使用subnav的绝对CSS positioning：

CSS

ul {
  padding-left: 0;
}

li {
  position: relative;
}

.subnav {
  position: absolute;
  top: 0;
}

.subnav li {
  display: inline-block;
}

Answer 2

获取并编辑此代码以满足您的目的：

​

var d = {
  e: function(id){
    return(document.getElementById(id));
  }
};
var System = {
    tabs: {
        init: function(){
            try{
                var tabs = d.e("tabs").querySelectorAll("tab");
                for(var i = 0; i < tabs.length; i++){
                    var e = tabs[i];
                    e.onclick = function(){
                        System.tabs.activate(this);
                    };
                }
                System.tabs.activate(tabs[0]);
            }catch(err){
                alert(err.stack);
            }
        },
        activate: function(name){
            try{
                var tabs = d.e("tabs").querySelectorAll("tab");
                for(var i = 0; i < tabs.length; i++){
                    tabs[i].setAttribute("active","false");
                }
                name.setAttribute("active","true");
                var contents = d.e("content").querySelectorAll("pane");
                for(var i = 0; i < contents.length; i++){
                    contents[i].style.display = "none";
                }
                contents[Array.from(tabs).indexOf(name)].style.display = "block";
            }catch(err){
                alert(err.stack);
            }
        }
    },
    goto: function(url){
      window.location.replace(url);
    }
};
window.onload = function(){
  System.tabs.init();
}

tab{
  display: inline-block;
  background: #777777;
  border: 1px solid #000000;
  padding: 4px;
}
tab:hover{
  background: #aaaaaa
}
#tabs{
  text-align: center;
}
tab[active="true"]{
  background: #77aa77;
}

<div id="tabs">
    <tab>Main page</tab><tab>Free sign-ups</tab><tab>Info about HTML</tab>
</div>
<div id="content">
    <pane>
        <h1>Welcome to my page!</h1>
        <p>Here are some tabs. Click them to see how they work. I made them myself! Just use my code and you are all set! No IDs are required to match each tab to its pane, only index position. I have a better version in my custom API, which is <a href="https://majorflux.codehs.com/api/api-help.html">here</a>! (copy the link because opening it would be a big problem)</p>
    </pane>
    <pane>
        <h1>Sign up</h1>
        <p>Username: <input type="text"/></p>
        <p>Password: <input type="password"/></p>
        <button>Sign up</button>
    </pane>
    <pane>
        <h1>HTML rules!</h1>
        <p>It is so cool to have all these features! Websites have tons of way to do many different things. This is all because it includes JavaScript and CSS! I can ramble about this all DAY! <b>LOL</b>!!!!</p>
    </pane>
</div>

​

我已经添加了System.goto(url)，这样你就可以有一个快捷方式来改变网址。