0

これらのボタンを中央ではなく下部に配置しようとすると問題が発生します。私はインターネットで検索し、多くのことを試しましたが、まだ機能しません。

ここに画像の説明を入力

これが私のHTMLコードの抜粋です:

<table class="table">
  <tr>
    <td class = "td"><img class = "logo" src="images/CoffeeLogo.jpg"></td>
    <td>
      <ul>
        <li><a class = "bt" href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#coffee">Menu</a></li>
        <li><a href="signupform.php">Sign up</a></li>
        <li><a href="#extra">extra</a></li>
      </ul>
    </td>
  </tr>
</table>

ボタンのCSSコードは次のとおりです。

ul
{
list-style-type:none;
padding:0;
overflow:hidden;
float: bottom;
margin-bottom: -10;

}
li
{
float:left;

}
a:link,a:visited
{
display:block;
height: 18px;
width:122px;
color:#FFFFFF;
background-color:#ca3838;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
font-family: "Gill Sans MT";
font-size: 13.5pt;
}
a:hover,a:active
{
background-color: #FF8080;
}
.table, .td, .th
{
border-collapse:collapse;
moz-box-shadow: 0 0 2px 2px #888;
webkit-box-shadow: 0 0 2px 2px#888;
box-shadow: 0 0 2px 2px #888;
border:0px;
border-left: 10px solid white;
margin-left: auto;
margin-right: auto;
padding: 0;
background-color: #ca3838;
}

助言がありますか？

4

9 に答える 9

1

最初の 2 つの CSS ルールを次のように変更します。

ul {
    list-style-type:none;
    padding:0;
    overflow:hidden;
    margin: 0;
}
li {
    float:left;
    padding-top:20px;
}

jsFiddle の例

あなたはユニットなしであなたにマージンを置いていたulので、それは基本的に無視されていましたが、とにかくそのようにしたくありませんでした. li代わりに、要素の上にパディングを置きます。

于 2013-05-01T18:26:31.830 に答える
0

このようなものは、達成するのがはるかに簡単になります: http://jsfiddle.net/C2NEY/1/

CSS:

#header {
  background-color:#ca3838;
}
#nav {
  width: 100%;
  margin: 0;
  padding: 0;
}
#nav li {
  display:inline-block;
  margin:0;
  padding:0;
  height: 25px;
  width:122px;
  padding:4px;
  text-align:center;
}
#nav li:hover {
  background-color: #FF8080;
}
#nav a {
  color:#FFFFFF;
  text-decoration:none;
  text-transform:uppercase;
  font-family:"Gill Sans MT";
  font-size: 13.5pt;
}

HTML:

<div id="header">
  <img class="logo" src="images/CoffeeLogo.jpg" />
  <ul id="nav">
    <li><a class="bt" href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#coffee">Menu</a></li>
    <li><a href="signupform.php">Sign up</a></li>
    <li><a href="#extra">extra</a></li>
  </ul>
</div>
于 2013-05-01T18:42:48.437 に答える