1. 首頁
  2. 問答
  3. HTML無法獲取標題中心的菜單

HTML無法獲取標題中心的菜單

2016-06-23 27 views
0

我似乎無法弄清楚如何讓菜單與已標題中心的標題中的文本內聯。我敢肯定，這不是一個難題，但我無法弄清楚，因爲我試圖教自己。 任何幫助，將不勝感激。HTML無法獲取標題中心的菜單

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    overflow-x: hidden; 
 
    font-family: sans-serif, arial; 
 
} 
 
#toplocation { 
 
    background-color: black; 
 
    color: grey; 
 
    margin-top: 0; 
 
    margin-bottom: 0; 
 
    margin-right: 0; 
 
    margin-left: 0; 
 
    padding-top: 5px; 
 
    padding-right: 5px; 
 
    padding-bottom: 5px; 
 
    padding-left: 5px; 
 
} 
 
#heading { 
 
    background-color: #2b2b2b; 
 
    color: white; 
 
    padding-top: 14px; 
 
    padding-right: 14px; 
 
    padding-bottom: 14px; 
 
    padding-left: 14px; 
 
} 
 
#redline { 
 
    background-color: #ff0a0a; 
 
    height: 2px; 
 
    border: 0; 
 
    padding: 0; 
 
} 
 
ul#menu { 
 
    padding: 0; 
 
} 
 
ul#menu li { 
 
    display: inline; 
 
} 
 
ul#menu li a { 
 
    background-color: #383838; 
 
    color: white; 
 
    padding: 4px 11px; 
 
    text-decoration: none; 
 
    border-radius: 3px 3px 3px 3px; 
 
} 
 
ul#menu li a:hover { 
 
    background-color: #ff0a0a; 
 
}
<link href="http://cdnjs.cloudflare.com/ajax/libs/font- awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<!DOCTYPE html> 
 

 
<div id="toplocation"> 
 
    <i class="fa fa-fax"></i> 
 
    (01)-8393790&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 
 
    <i class="fa fa-map- marker">&nbspBaldoyle Industrial Estate</i> 
 
</div> 
 
<div id="heading"> 
 
    <h3>Kilbride Classic Cuisine 
 
    <ul id="menu"> 
 
     <li><a href="default.asp">Home</a></li> 
 
\t <li><a href="news.asp">Products</a></li> 
 
\t <li><a href="contact.asp">MyOwn Gym Foods</a></li> 
 
\t <li><a href="about.asp">Contact Us</a></li> \t 
 
\t </ul> 
 
    </h3> 
 
</div> 
 
<div id="redline"></div>

來源

2016-06-23 Dylan

+1

你可以把你的代碼在'jsFiddle'或類似向我們展示這個問題， 請？ – melancia

+0

你的描述看起來很模糊。你能詳細說明嗎？ –

+0

不知道該怎麼處理那個伴侶，之前沒用過 – Dylan

回答

1

這是你在找什麼？從你的描述中做出一些猜測。

html,body 
 
{ 
 
width: 100%; 
 
height: 100%; 
 
margin: 0px; 
 
padding: 0px; 
 
overflow-x: hidden; 
 
font-family: sans-serif, arial; 
 
} 
 

 

 

 
#toplocation 
 
{ 
 
background-color:black; 
 
color:grey; 
 
margin-top: 0; 
 
margin-bottom:0; 
 
margin-right: 0; 
 
margin-left: 0; 
 
padding-top: 5px; 
 
padding-right: 5px; 
 
padding-bottom: 5px; 
 
padding-left: 5px; 
 
} 
 

 
#heading 
 
{ 
 
background-color:#2b2b2b; 
 
color:white; 
 
padding-top: 14px; 
 
padding-right: 14px; 
 
padding-bottom: 14px; 
 
padding-left: 14px; 
 

 
} 
 
#redline 
 
{ 
 
background-color:#ff0a0a; 
 

 
height: 2px; 
 
border: 0; 
 
padding: 0; 
 
} 
 
.pull-left{ 
 
    float:left; 
 
    display:inline-block; 
 
    margin-right:100px; 
 
    } 
 
.h2{ 
 
    font-size:22px; 
 
    } 
 

 
ul#menu { 
 
padding: 0; 
 
} 
 

 
ul#menu li { 
 
display: inline; 
 

 
} 
 

 
ul#menu li a { 
 
background-color: #383838; 
 
color: white; 
 
padding: 4px 11px; 
 
text-decoration: none; 
 
border-radius: 3px 3px 3px 3px; 
 
} 
 

 
ul#menu li a:hover { 
 
background-color: #ff0a0a; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-   awesome/4.4.0/css/font-awesome.min.css"> 
 
<link rel="stylesheet" type="text/css" href="HomepageStyleSheet.css"> 
 
<title>Kilbride Classic Cuisine</title> 
 
</head> 
 
<body> 
 
<div id="toplocation"> 
 
    <i class="fa fa-fax"></i> 
 
    (01)-8393790&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<i class="fa fa-map- marker">&nbspBaldoyle Industrial Estate</i> 
 
    </div> 
 
<div id="heading"> 
 
    <div class="h2"> 
 
     <span class="pull-left">Kilbride Classic Cuisine </span> 
 
    <ul id="menu"> 
 

 
     <li><a href="default.asp">Home</a></li> 
 
     <li><a href="news.asp">Products</a></li> 
 
     <li><a href="contact.asp">MyOwn Gym Foods</a></li> 
 
     <li><a href="about.asp">Contact Us</a></li> 
 

 
</ul> 
 
</div> 
 
</div> 
 
<div id="redline"></div>

來源

2016-06-23 09:19:56

+0

這就是尋找伴侶的那種事，謝謝。我如何去增加它和文本之間的空間？ – Dylan

+0

@Dylan：使用margin-left：20px'到ul' – Pugazh

+0

您可以爲標題元素賦予權限。我已經更新了代碼。它會在大屏幕上看起來很乾淨。 –

0

編輯 這是你想要的嗎？

html,body 
 
{ 
 
width: 100%; 
 
height: 100%; 
 
margin: 0px; 
 
padding: 0px; 
 
overflow-x: hidden; 
 
font-family: sans-serif, arial; 
 
} 
 

 

 

 
#toplocation 
 
{ 
 
background-color:black; 
 
color:grey; 
 
margin-top: 0; 
 
margin-bottom:0; 
 
margin-right: 0; 
 
margin-left: 0; 
 
padding-top: 5px; 
 
padding-right: 5px; 
 
padding-bottom: 5px; 
 
padding-left: 5px; 
 
} 
 
h3{float:left;margin:12px 10px;} 
 

 
#heading 
 
{ 
 
background-color:#2b2b2b; 
 
color:white; 
 
padding-top: 14px; 
 
padding-right: 14px; 
 
padding-bottom: 14px; 
 
padding-left: 14px; 
 
} 
 
#redline 
 
{ 
 
background-color:#ff0a0a; 
 

 
height: 2px; 
 
border: 0; 
 
padding: 0; 
 
} 
 
ul#menu { 
 
padding: 0; 
 
} 
 

 
ul#menu li { 
 
display: inline; 
 

 
} 
 

 
ul#menu li a { 
 
background-color: #383838; 
 
color: white; 
 
padding: 4px 11px; 
 
text-decoration: none; 
 
border-radius: 3px 3px 3px 3px; 
 
} 
 

 
ul#menu li a:hover { 
 
background-color: #ff0a0a; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-   awesome/4.4.0/css/font-awesome.min.css"> 
 
<link rel="stylesheet" type="text/css" href="HomepageStyleSheet.css"> 
 
<title>Kilbride Classic Cuisine</title> 
 
</head> 
 
<body> 
 
<div id="toplocation"> 
 
    <i class="fa fa-fax"></i> 
 
    (01)-8393790&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<i class="fa fa-map- marker">&nbspBaldoyle Industrial Estate</i> 
 
    </div> 
 
<div id="heading"> 
 
    <h3>Kilbride Classic Cuisine </h3> 
 
    <ul id="menu"> 
 

 
     <li><a href="default.asp">Home</a></li> 
 
     <li><a href="news.asp">Products</a></li> 
 
     <li><a href="contact.asp">MyOwn Gym Foods</a></li> 
 
     <li><a href="about.asp">Contact Us</a></li> 
 

 
</ul> 
 

 
</div> 
 
<div id="redline"></div>

來源

2016-06-23 09:18:42

0

首先，你真的不應該把ul的h3內。

然後，將標題h3與菜單對齊，將它們都設置爲display:inline-block和vertical-align:middle;。

然後菜單和標題將排隊只要在同一行上有足夠的空間。

Codepen Demo

#toplocation { 
 
    background-color: black; 
 
    color: grey; 
 
    padding: 5px; 
 
} 
 

 
#heading { 
 
    background-color: #2b2b2b; 
 
    color: white; 
 
    padding: 14px; 
 
} 
 

 
#heading h3 { 
 
    display: inline-block; 
 
} 
 

 

 
ul#menu { 
 
    padding: 0; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 

 
ul#menu li { 
 
    display: inline; 
 
} 
 

 
ul#menu li a { 
 
    background-color: #383838; 
 
    color: white; 
 
    padding: 4px 11px; 
 
    text-decoration: none; 
 
    border-radius: 3px 3px 3px 3px; 
 
} 
 

 
ul#menu li a:hover { 
 
    background-color: #ff0a0a; 
 
}
<div id="toplocation"> 
 
    <i class="fa fa-fax"></i> 
 
    (01)-8393790 <i class="fa fa-map-marker"> Baldoyle Industrial Estate</i> 
 
    </div> 
 
<div id="heading"> 
 
    <h3>Kilbride Classic Cuisine </h3> 
 
    <ul id="menu"> 
 

 
     <li><a href="default.asp">Home</a></li> 
 
     <li><a href="news.asp">Products</a></li> 
 
     <li><a href="contact.asp">MyOwn Gym Foods</a></li> 
 
     <li><a href="about.asp">Contact Us</a></li> 
 

 
</ul> 
 

 
</div>

來源

2016-06-23 09:20:52

0

看看這個，我定你的代碼：https://jsfiddle.net/geof9LuL/2/

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    overflow-x: hidden; 
 
    font-family: sans-serif, arial; 
 
} 
 

 
#toplocation { 
 
    background-color: black; 
 
    color: grey; 
 
    margin-top: 0; 
 
    margin-bottom: 0; 
 
    margin-right: 0; 
 
    margin-left: 0; 
 
    padding-top: 5px; 
 
    padding-right: 5px; 
 
    padding-bottom: 5px; 
 
    padding-left: 5px; 
 
} 
 

 
#heading { 
 
    overflow:hidden; 
 
    background-color: #2b2b2b; 
 
    color: white; 
 
    padding-top: 14px; 
 
    padding-right: 14px; 
 
    padding-bottom: 14px; 
 
    padding-left: 14px; 
 
} 
 

 
#redline { 
 
    background-color: #ff0a0a; 
 
    height: 2px; 
 
    border: 0; 
 
    padding: 0; 
 
} 
 

 
ul#menu { 
 
    padding: 0; 
 
} 
 

 
ul#menu li { 
 
    display: inline; 
 
} 
 

 
ul#menu li a { 
 
    background-color: #383838; 
 
    color: white; 
 
    padding: 4px 11px; 
 
    text-decoration: none; 
 
    border-radius: 3px 3px 3px 3px; 
 
} 
 

 
ul#menu li a:hover { 
 
    background-color: #ff0a0a; 
 
} 
 

 
.title { 
 
    display: inline-block; 
 
} 
 

 
.menu-container { 
 
    display: inline-block; 
 
    float:right; 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-   awesome/4.4.0/css/font-awesome.min.css"> 
 
    <link rel="stylesheet" type="text/css" href="HomepageStyleSheet.css"> 
 
    <title>Kilbride Classic Cuisine</title> 
 
    </head> 
 

 
    <body> 
 
    <div id="toplocation"> 
 
     <i class="fa fa-fax"></i> (01)-8393790&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 
 
     <i class="fa fa-map- marker">&nbspBaldoyle Industrial Estate</i> 
 
    </div> 
 
    <div id="heading"> 
 
     <h3 class="title">Kilbride Classic Cuisine</h3> 
 
     <div class="menu-container"> 
 
     <ul id="menu"> 
 

 
      <li><a href="default.asp">Home</a></lai> 
 
      <li><a href="news.asp">Products</a></li> 
 
      <li><a href="contact.asp">MyOwn Gym Foods</a></li> 
 
      <li><a href="about.asp">Contact Us</a></li> 
 

 
     </ul> 
 

 
     </div> 
 
    </div> 
 
    <div id="redline"></div>

另外，在你的例子中，你有在<h3>這是無效的菜單。

來源

2016-06-23 09:23:22 Signo

0

ul#menu和h3標籤都應聲明爲display: inline。

儘量避免在<h3>中執行某些操作，因爲某些搜索引擎正在查找這些標籤並使用它們。

<h3>Kilbride Classic Cuisine</h3> 
<ul id="menu">...</ul>

對於<div id="heading">你可以使用新的HTML標籤<header id="heading">。

來源

2016-06-23 09:28:37 Piu130

0

將display: inline添加到您的ul#menu應該做的伎倆。

margin-left: 20px;在標題和菜單之間有間距。

改性ul#menu如下

ul#menu { 
    padding: 0; 
    margin-left: 20px; 
    display: inline; 
}

以下是完整的片段：

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    overflow-x: hidden; 
 
    font-family: sans-serif, arial; 
 
} 
 
#toplocation { 
 
    background-color: black; 
 
    color: grey; 
 
    margin-top: 0; 
 
    margin-bottom: 0; 
 
    margin-right: 0; 
 
    margin-left: 0; 
 
    padding-top: 5px; 
 
    padding-right: 5px; 
 
    padding-bottom: 5px; 
 
    padding-left: 5px; 
 
} 
 
#heading { 
 
    background-color: #2b2b2b; 
 
    color: white; 
 
    padding-top: 14px; 
 
    padding-right: 14px; 
 
    padding-bottom: 14px; 
 
    padding-left: 14px; 
 
    overflow: hidden; 
 
} 
 
#redline { 
 
    background-color: #ff0a0a; 
 
    height: 2px; 
 
    border: 0; 
 
    padding: 0; 
 
} 
 
ul#menu { 
 
    padding: 0; 
 
    margin-left: 20px; 
 
    display: inline; 
 
} 
 
ul#menu li { 
 
    display: inline; 
 
} 
 
ul#menu li a { 
 
    background-color: #383838; 
 
    color: white; 
 
    padding: 4px 11px; 
 
    text-decoration: none; 
 
    border-radius: 3px 3px 3px 3px; 
 
} 
 
ul#menu li a:hover { 
 
    background-color: #ff0a0a; 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-   awesome/4.4.0/css/font-awesome.min.css"> 
 
    <link rel="stylesheet" type="text/css" href="HomepageStyleSheet.css"> 
 
    <title>Kilbride Classic Cuisine</title> 
 
</head> 
 

 
<body> 
 
    <div id="toplocation"> 
 
    <i class="fa fa-fax"></i> 
 
    (01)-8393790&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 
 
    <i class="fa fa-map- marker">&nbspBaldoyle Industrial Estate</i> 
 
    </div> 
 
    <div id="heading"> 
 
    <h3>Kilbride Classic Cuisine 
 
    <ul id="menu"> 
 
     <li><a href="default.asp">Home</a> 
 
     </li> 
 
     <li><a href="news.asp">Products</a> 
 
     </li> 
 
     <li><a href="contact.asp">MyOwn Gym Foods</a> 
 
     </li> 
 
     <li><a href="about.asp">Contact Us</a> 
 
     </li> 
 
    </ul> 
 
    </h3> 
 
    </div> 
 
    <div id="redline"></div> 
 
</body>

來源

2016-06-23 09:36:03 Pugazh

相關問題

 相關問題