다음과 같이 목록 항목을 "가짜 메뉴 항목"으로 사용하고 있습니다.
<li>Match
<ul class="second-level-menu">
<li class="inlineblock" id="mniMatchWorkersWithJobLocs" name="mniMatchWorkersWithJobLocs">Workers with Jobs/Locations</li>
<li id="mniMatchWorkersWithShifts" name="mniMatchWorkersWithShifts">Workers with Shifts</li>
</ul>
</li>
문제는 "Workers with Jobs / Locations"와 같은 더 긴 하위 메뉴 항목이 두 줄로 나뉘어져 있다는 것입니다. 나는 그들이 한 줄에 머물기를 원합니다.
나는 li이 클래스를 단순히 할당하는 것으로 충분하다고 의사 영리하게 생각했습니다.
.inlineblock {
display: inline-block;
}
...하지만 겨자를 자르지는 않습니다. 내가 무엇을 놓치고 있거나 잘못 생각하고 있습니까?
답변을 바탕으로 이제 다음 CSS가 있습니다.
.inlineblock {
display: inline-block;
}
li.inlineblock ul li{
display: inline-block;
}
... 그리고이 HTML :
<li class="inlineblock">Match
<ul class="second-level-menu">
<li id="mniMatchWorkersWithJobLocs" name="mniMatchWorkersWithJobLocs">Workers with Jobs/Locations</li>
<li id="mniMatchWorkersWithShifts" name="mniMatchWorkersWithShifts">Workers with Shifts</li>
</ul>
</li>
...하지만 나는 여전히 이것을 본다.
다음은 가짜 메뉴에 대한 전체 HTML입니다.
<template name="mnuScheduler">
<div class="grid">
<div class="col-All">
<nav>
<ul class="top-level-menu">
<li>Schedules
<ul class="second-level-menu">
<li id="mniOpenExisting" name="mniOpenExisting">Open Existing</li>
<li>Create New...
<ul class="third-level-menu">
<li id="mniCreateNewScheduleBasedOnExisting" name="mniCreateNewScheduleBasedOnExisting">Based on Existing</li>
<li id="mniCreateNewScheduleFromScratch" name="mniCreateNewScheduleFromScratch">From Scratch</li>
</ul>
</li>
<li id="mniSaveCurrentSchedule" name="mniSaveCurrentSchedule">Save Current</li>
<li id="mniEmailCurrentSchedule" name="mniEmailCurrentSchedule">Email Current</li>
<li id="mniPrintCurrentSchedule" name="mniPrintCurrentSchedule">Print Current</li>
</ul>
</li>
<li>Jobs/Locations
<ul class="second-level-menu">
<li id="mniAddNewJobLoc" name="mniAddNewJobLoc">Add New</li>
<li id="mniViewOrEditJobLoc" name="mniViewOrEditJobLoc">View or Edit</li>
</ul>
</li>
<li>Shifts
<ul class="second-level-menu">
<li id="mniAddNewShift" name="mniAddNewShift">Add New</li>
<li id="mniViewOrEditShift" name="mniViewOrEditShift">View or Edit</li>
</ul>
</li>
<li>Workers
<ul class="second-level-menu">
<li id="mniAddNewWorker" name="mniAddNewWorker">Add New</li>
<li id="mniViewOrEditWorker" name="mniViewOrEditWorker">View or Edit</li>
</ul>
</li>
<li class="inlineblock">Match
<ul class="second-level-menu">
<li id="mniMatchWorkersWithJobLocs" name="mniMatchWorkersWithJobLocs">Workers with Jobs/Locations</li>
<li id="mniMatchWorkersWithShifts" name="mniMatchWorkersWithShifts">Workers with Shifts</li>
</ul>
</li>
<li>Rules
<ul class="second-level-menu">
<li id="mniSetRules" name="mniSetRules">Establish/Maintain</li>
</ul>
</li>
<li>Help
<ul class="second-level-menu">
<li id="mniAbout" name="mniAbout">About</li>
<li id="mniHowTo" name="mniHowTo">How To...</li>
<li id="mniContact" name="mniContact">Contact Us</li>
<li id="mniAcquireLicense" name="mniAcquireLicense">Acquire License</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</template>
이:
CSS:
.inlineblock {
white-space: nowrap;
}
li.inlineblock ul li{
display: inline-block;
}
HTML :
<li class="inlineblock">Match
<ul class="second-level-menu">
<li id="mniMatchWorkersWithJobLocs" name="mniMatchWorkersWithJobLocs">Workers with Jobs/Locations</li>
<li id="mniMatchWorkersWithShifts" name="mniMatchWorkersWithShifts">Workers with Shifts</li>
</ul>
</li>
... 두 하위 메뉴 항목이 같은 줄에 표시되도록했습니다 (한 단계 앞으로, 두 단계 뒤로)
이:
/*.inlineblock {
white-space: nowrap;
}
li.inlineblock ul li{
display: inline-block;
}*/
li {
white-space: nowrap;
}
... 두 메뉴 항목을 별도의 줄에 배치하지만 첫 번째 항목은 "잘림"입니다 ( "Workers with Jobs / Lo"로 표시됨).
Joseph Marikle의 요청에 대한 응답으로 모든 CSS는 다음과 같습니다.
html {
font-family:'Segoe UI Light', 'Bookman Old Style', Calibri, Candara, serif;
}
header {
background: #d2edf4;
background-image: linear-gradient(to bottom, #d0edf5, #e1e5f0 100%);
padding: 20px 15px 15px 15px;
position: relative;
}
/*body {
font-family: 'Palatino Linotype', 'Bookman Antigua', Palatino, serif;
background-color: lightyellow;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
font-size: 14px;
width:80%;
margin-left:auto;
margin-right:auto;
padding: 10px 50px 200px;
}*/
body {
height: 100%;
min-height: 100%;
width: 80%;
margin: 0 auto;
padding: 50px 48px 0;
line-height: 1;
color: #333;
background: #FFF;
font-family: ff-tis-web-pro, 'Palatino Linotype', 'Bookman Antigua', Palatino, Georgia, serif;
-webkit-text-size-adjust: 100%;
}
nav {
background-color: forestgreen;
}
form {
background-color: lightyellow;
}
h1 {
color: navy;
font-family: "Segoe UI", serif;
font-size: 2.5em;
margin: 0;
margin-bottom: 10px;
display: inline-block;
margin-right: 1em;
}
h2 {
font-family: 'Bookman Old Style', Verdana, sans-serif;
}
input:focus {
background-color: lightyellow;
}
input:hover {
background-color: azure;
}
table {
width: 1200px;
margin: 0 auto;
background-color: azure;
/*min-height: 100%;*/
margin-top: 80px;
}
table, th, td {
border: 1px solid navy;
border-collapse: collapse;
}
th, td {
padding: 5px;
/*text-align: left;*/
}
input[type="text"] {
margin-bottom: 4px;
}
input[type="submit"] {
margin-top: 8px;
}
input[type="time"] {
margin: 3px;
}
p {
font-size: 14px;
}
[class*='col-'] {
float: left;
margin: 4px;
}
.grid {
background: white;
}
.module {
background: lightyellow;
}
.col-All {
width: 90%;
}
.col-2-3 {
width: 60%;
}
.col-1-3 {
width: 30%;
}
.col-1-2 {
width: 45%;
}
.col-1-4 {
width: 22.5%;
}
/* for aligning input texts that follow labels on forms and such; can create other sizes too (label120,etc.) */
.label88 {
width: 88px;
display: inline-block;
}
.label144 {
width: 144px;
display: inline-block;
}
.joblocoptionallabel {
width: 124px;
display: inline-block;
}
/*.inlineblock {
white-space: nowrap;
}
li.inlineblock ul li{
display: inline-block;
}*/
li {
white-space: nowrap;
}
.hide {
visibility: hidden;
display: none;
}
.smallcaps {
font-variant: small-caps;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: lightyellow;
}
.dateLabel {
font-size: 16px;
font-family: Candara, 'Segoe UI', sans-serif;
color: forestgreen;
}
.shiftLabel {
font-size: 13px;
font-family: Calibri, serif;
color: red;
}
.jobLoc {
margin-right: 16px;
width: 115px;
}
.jobLocCount {
width: 40px;
}
.trabajar {
width: 159px;
margin-right: 16px;
margin-top: 4px;
}
.shortTextInput {
width: 64px;
}
.floatleft {
float: left;
display: block;
}
/* Menu-specific styles/rules, adapted from */
.third-level-menu {
position: absolute;
top: 0;
right: -150px;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.third-level-menu > li {
height: 30px;
background: gray;
}
.third-level-menu > li:hover {
background: white;
}
.second-level-menu {
position: absolute;
top: 30px;
left: 0;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.second-level-menu > li {
position: relative;
height: 30px;
background: orange;
color: white;
}
.second-level-menu > li:hover {
background: green;
}
.top-level-menu {
list-style: none;
padding: 0;
margin-bottom: 12px;
width: 100%;
display:block;
/*border: 1px; <= not working*/
}
.top-level-menu > li {
position: relative;
float: left;
height: 30px;
width: 150px;
background: moccasin;
}
.top-level-menu > li:hover {
background: lightgray;
}
.top-level-menu li:hover > ul {
/* On hover, display the next level's menu */
display: inline;
}
/* End of Menu-specific Styles */
초기 문제는 목록 항목이 한 줄에 전체 이름을 이상적으로 유지해야하는 메뉴로 둘러싸여 있다는 것이 었습니다. 첫 번째로 제안 된 솔루션은를 적용하는 white-space:nowrap
것이지만이 경우 원본 포스터에는 오버플로를 차단하는 메뉴가 있습니다 (사용 overflow:hidden
). 이를 극복하기 위해 포함 컨테이너 목록 (단순한 ul
요소) 의 너비 만 변경하는 것이 훨씬 더 간단했습니다 . 너비 150px
는 원래 짧은 이름을 가진 항목이있는 하위 메뉴 항목에 대해 메뉴가 균일하게 보이도록 설정되었습니다. 이 동일한 효과는 폭을에서 설정 (또는 남겨두기) auto
하고 제공 함으로써 여분의 넓은 목록을 잃지 않고 얻을 수 있습니다 min-width: 100%;
. 이는 하위 메뉴가 상위 li 항목에 상대적이기 때문에 작동합니다. 100 %는 부모와 같은 너비가됩니다.li
.
TL; DR은 요약하면, 폭을 제거하고 100 %의 최소 폭을 추가하면 OP에 대한 문제를 해결했다.
아래와 같이 변경된 코드 :
html {
font-family:'Segoe UI Light', 'Bookman Old Style', Calibri, Candara, serif;
}
header {
background: #d2edf4;
background-image: linear-gradient(to bottom, #d0edf5, #e1e5f0 100%);
padding: 20px 15px 15px 15px;
position: relative;
}
/*body {
font-family: 'Palatino Linotype', 'Bookman Antigua', Palatino, serif;
background-color: lightyellow;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
font-size: 14px;
width:80%;
margin-left:auto;
margin-right:auto;
padding: 10px 50px 200px;
}*/
body {
height: 100%;
min-height: 100%;
width: 80%;
margin: 0 auto;
padding: 50px 48px 0;
line-height: 1;
color: #333;
background: #FFF;
font-family: ff-tis-web-pro, 'Palatino Linotype', 'Bookman Antigua', Palatino, Georgia, serif;
-webkit-text-size-adjust: 100%;
}
nav {
background-color: forestgreen;
}
form {
background-color: lightyellow;
}
h1 {
color: navy;
font-family: "Segoe UI", serif;
font-size: 2.5em;
margin: 0;
margin-bottom: 10px;
display: inline-block;
margin-right: 1em;
}
h2 {
font-family: 'Bookman Old Style', Verdana, sans-serif;
}
input:focus {
background-color: lightyellow;
}
input:hover {
background-color: azure;
}
table {
width: 1200px;
margin: 0 auto;
background-color: azure;
/*min-height: 100%;*/
margin-top: 80px;
}
table, th, td {
border: 1px solid navy;
border-collapse: collapse;
}
th, td {
padding: 5px;
/*text-align: left;*/
}
input[type="text"] {
margin-bottom: 4px;
}
input[type="submit"] {
margin-top: 8px;
}
input[type="time"] {
margin: 3px;
}
p {
font-size: 14px;
}
[class*='col-'] {
float: left;
margin: 4px;
}
.grid {
background: white;
}
.module {
background: lightyellow;
}
.col-All {
width: 90%;
}
.col-2-3 {
width: 60%;
}
.col-1-3 {
width: 30%;
}
.col-1-2 {
width: 45%;
}
.col-1-4 {
width: 22.5%;
}
/* for aligning input texts that follow labels on forms and such; can create other sizes too (label120,etc.) */
.label88 {
width: 88px;
display: inline-block;
}
.label144 {
width: 144px;
display: inline-block;
}
.joblocoptionallabel {
width: 124px;
display: inline-block;
}
/*.inlineblock {
white-space: nowrap;
}
li.inlineblock ul li{
display: inline-block;
}*/
li {
white-space: nowrap;
}
.hide {
visibility: hidden;
display: none;
}
.smallcaps {
font-variant: small-caps;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: lightyellow;
}
.dateLabel {
font-size: 16px;
font-family: Candara, 'Segoe UI', sans-serif;
color: forestgreen;
}
.shiftLabel {
font-size: 13px;
font-family: Calibri, serif;
color: red;
}
.jobLoc {
margin-right: 16px;
width: 115px;
}
.jobLocCount {
width: 40px;
}
.trabajar {
width: 159px;
margin-right: 16px;
margin-top: 4px;
}
.shortTextInput {
width: 64px;
}
.floatleft {
float: left;
display: block;
}
/* Menu-specific styles/rules, adapted from */
.third-level-menu {
position: absolute;
top: 0;
right: -150px;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.third-level-menu > li {
height: 30px;
background: gray;
}
.third-level-menu > li:hover {
background: white;
}
.second-level-menu {
position: absolute;
top: 30px;
left: 0;
/*width: 150px;*/
min-width: 100%;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.second-level-menu > li {
position: relative;
height: 30px;
background: orange;
color: white;
}
.second-level-menu > li:hover {
background: green;
}
.top-level-menu {
list-style: none;
padding: 0;
margin-bottom: 12px;
width: 100%;
display:block;
/*border: 1px; <= not working*/
}
.top-level-menu > li {
position: relative;
float: left;
height: 30px;
width: 150px;
background: moccasin;
}
.top-level-menu > li:hover {
background: lightgray;
}
.top-level-menu li:hover > ul {
/* On hover, display the next level's menu */
display: inline;
}
/* End of Menu-specific Styles */
<div class="grid">
<div class="col-All">
<nav>
<ul class="top-level-menu">
<li>Schedules
<ul class="second-level-menu">
<li id="mniOpenExisting" name="mniOpenExisting">Open Existing</li>
<li>Create New...
<ul class="third-level-menu">
<li id="mniCreateNewScheduleBasedOnExisting" name="mniCreateNewScheduleBasedOnExisting">Based on Existing</li>
<li id="mniCreateNewScheduleFromScratch" name="mniCreateNewScheduleFromScratch">From Scratch</li>
</ul>
</li>
<li id="mniSaveCurrentSchedule" name="mniSaveCurrentSchedule">Save Current</li>
<li id="mniEmailCurrentSchedule" name="mniEmailCurrentSchedule">Email Current</li>
<li id="mniPrintCurrentSchedule" name="mniPrintCurrentSchedule">Print Current</li>
</ul>
</li>
<li>Jobs/Locations
<ul class="second-level-menu">
<li id="mniAddNewJobLoc" name="mniAddNewJobLoc">Add New</li>
<li id="mniViewOrEditJobLoc" name="mniViewOrEditJobLoc">View or Edit</li>
</ul>
</li>
<li>Shifts
<ul class="second-level-menu">
<li id="mniAddNewShift" name="mniAddNewShift">Add New</li>
<li id="mniViewOrEditShift" name="mniViewOrEditShift">View or Edit</li>
</ul>
</li>
<li>Workers
<ul class="second-level-menu">
<li id="mniAddNewWorker" name="mniAddNewWorker">Add New</li>
<li id="mniViewOrEditWorker" name="mniViewOrEditWorker">View or Edit</li>
</ul>
</li>
<li class="inlineblock">Match
<ul class="second-level-menu">
<li id="mniMatchWorkersWithJobLocs" name="mniMatchWorkersWithJobLocs">Workers with Jobs/Locations</li>
<li id="mniMatchWorkersWithShifts" name="mniMatchWorkersWithShifts">Workers with Shifts</li>
</ul>
</li>
<li>Rules
<ul class="second-level-menu">
<li id="mniSetRules" name="mniSetRules">Establish/Maintain</li>
</ul>
</li>
<li>Help
<ul class="second-level-menu">
<li id="mniAbout" name="mniAbout">About</li>
<li id="mniHowTo" name="mniHowTo">How To...</li>
<li id="mniContact" name="mniContact">Contact Us</li>
<li id="mniAcquireLicense" name="mniAcquireLicense">Acquire License</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다