html - 带 CSS 和 HTML 的按钮 - 按 ID 选择

Question

我正在尝试创建我的第一个网站，但一直停留在菜单按钮(导航栏)上。我终于设法以某种方式创建了一个按钮。通过 ID、类和属性观看了一些关于 CSS 选择器的视频，但是每当我尝试修改第一个按钮的工作代码以应用于其余按钮时，它就是行不通。我正在尝试使用 < strong>ID 而不是 Class 选择(类效果很好)因为我想更改每个按钮的图片和大小并使所有按钮都在同一行上，我自己也做不到.

这是我的带有类选择器的代码，请告知如何使用 ID 来制作它，就像我只是用散列标签更改点一样，它不起作用。如果我尝试重新排序选定的部分(如 a、li 等)，它不起作用。

JSFiddle example

#menu {
    height: 70px; /* separating the next content from the button */
    width: 0px;
    text-align: center;
    margin: 0, auto;
}

我该怎么做以及如何使菜单在同一行上。尝试使用 float 和 style="clear:both" 之后菜单后面的内容，但它似乎不起作用。

Answer 1

首先，您不应该使用 ID 来选择那种元素。更好地使用 ID 来识别您网站的区域。

但是，您可以在这里找到有效代码:http://jsfiddle.net/cjTN7/24/

#home, #about, #news { background-size: cover; }
#home { 
    height: 100px;
    width: 100px; 
}
#about {
    height: 200px;
    width: 200px; 
}
#news {
    height: 300px;
    width: 300px; 
}

对于内联菜单，您将#menu 宽度设置为 0px。 #menu 应该是 100%(或者比你里面的元素大的任何东西)并且将你的元素设置为 inline-block 而不是 block。

我不知道我是否理解你的问题，但希望对你有所帮助。祝你好运:)