줄 바꿈 없이 정당화된 CSS 메뉴가 작동하지 않음줄 바꿈 없이 정당화된 CSS 메뉴가 작동하지 않음

줄 바꿈 없이 정당화된 CSS 메뉴가 작동하지 않음

저는 몇몇 친구들을 위해 맞춤형 워드프레스 템플릿을 설계하고 있는데, 수평적으로 정당화된 상단 메뉴를 원합니다.wp_page_menu가 목록 요소를 모두 한 줄로 출력하고, 이는 (머리를 긁는 LOT! 이후) 형식이 깨지고 요소 사이의 모든 공간이 제거되는 것처럼 보이는 것을 제외하고는 모두 괜찮습니다.예를 들어, 다음 출력은 1, 2, 3을 띄운 다음 모두 456을 출력합니다. (Safari, Firefox 및 Chrome에서 테스트되었으며, 모두 Mac에서 테스트됨)

<style>

.menu {
    text-align: justify;
    width: 700px;
    margin: 10px;
}

.menu * {
    display: inline;
}

.menu span {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 0;
}

</style>

<div class="menu">
    <ul>
        <li><a href="http://localhost/">1</a></li>
        <li><a href="http://localhost/">2</a></li>
        <li><a href="http://localhost/">3</a></li>
        <li><a href="http://localhost/">4</a></li><li><a href="http://localhost/">5</a></li><li><a href="http://localhost/">6</a></li>
    </ul>
    <span></span>
</div>

나는 이미 UL 뒤에 스판을 추가하기 위해 wp_page_메뉴의 출력을 편집하는 사용자 지정 기능을 가지고 있으므로 가장 쉬운 작업은 그 기능을 확장하여 줄을 끊는 것일 것이라고 생각하지만, 다른 아이디어가 있거나 왜 이런 일이 일어나는지(특히 그것!) 말해줄 수 있는 사람이 있다면 좋을 것입니다.

편집:

html에 공백을 삽입하는 기능을 추가하여 지금 수정하였습니다(지금은 관심있는 분이 계시거나 나중에 누군가가 이 문제를 발견한다면 아래 코드).그게 필요한 전부였던 것 같네요!이것이 필요한 이유를 말해줄 수 있는 사람이 있다면 여전히 듣고 싶을 것입니다.

// Add a space after the </li> in wp_page_menu to allow justification of the menu
function add_break($break) {
    return preg_replace('/<\/li>/', '</li> ', $break, -1);
}
add_filter('wp_page_menu','add_break');

당신의 질문에 답하자면 xHTML은 그렇게 작동합니다.다음 사항이 있는 경우:

<a href="#">test</a><a href="#">test1</a>

그건 다음과 같이 나타날 것입니다.

testtest1

그리고 다음 사항이 있을 경우:

<a href="#">test</a> <a href="#">test1</a>

그건 다음과 같이 나타날 것입니다.

test test1

지금, 같은 논리가 그들에게 효과가 있습니다.<li>요소들 뿐만 아니라 다음과 같은 다양한 다른 선택기들.<img>셀렉터

세 개의 이미지가 한 줄에 있는 헤더를 사용해 본 적이 있지만, 이를 수행하려고 했을 때:

 <img src="#" />
 <img src="#" />
 <img src="#" />

공백을 삽입합니다( 각각의 이미지를 본 후에 줄을 서는 것은 그렇지 않을 것입니다.

당신의 기능은 당신이 원하는 것을 정확히 달성합니다.자바스크립트나 CSS로도 할 수 있었지만 솔루션이 더 좋습니다.궁금하실 경우를 대비해 CSS로 하는 방법은 다음과 같습니다.

.menu li:before {
    content:' ';
}

도움이 됐기를 바랍니다.

표시 대신: inline, 목록을 왼쪽으로 이동해 보십시오. 그러면 다음과 같습니다.
아니요:

.menu * {
   display: inline;
}

대신

.menu li{
   float:left;
   padding:0 5px;
   list-style:none;
}

내가 다른 것들에 좀 집착하는 것 같은데 한 번 해보세요!

제가 제대로 이해했다면, 정말로 필요한 것은 표로 된 레이아웃입니다.CSS에 추가해 보십시오.

.menu { display: table; }
.menu ul { display:table-row; }
.menu li { display:table-cell; }

그냥 다 버리고 같은 반 이름의 디브로 만들 수도 있어요.

언급URL : https://stackoverflow.com/questions/3463356/justified-css-menu-not-working-without-line-breaks-between-li