메뉴 설명 뒤에 점선 추가하기

Question

CSS의 레스토랑 메뉴에 동적 ".........."을 추가하는 방법은 무엇입니까? 인쇄 된 것과 마찬가지로 그들은 전체를 가지고 있습니다. "우리 음식은 어쩌구 저쩌구 ............. $ 24.99."

CSS에서 어떻게합니까? 아니면 이것도 가능합니까?

Answer 1

가장 좋은 방법은 이것이다 : 같은 CSS로

<ul class="menu"> 
    <li><span class="name">Yummy stuff</span> <span class="price">$400</span></li> 
</ul> 

, 그러나 효과를 얻기 위해 조절할 수있다)

li { 
    width: 300px; 
    height: 20px; 
    border-bottom: 1px dotted black; 
    background-color: white; 
} 

.food, .price { 
    height: 22px; //key: just a bit taller than the LI 
    background-color: white; 
} 

.food { 
    float: left; 
} 

.price { 
    float: right; 
} 

그래서 기본적으로 LI의 직사각형을 수정하고 하단에 경계선을 그려 가격과 식품 이름이 너비에 따라 동적으로 덮여 있습니다. 브라우저가있는 YMMV이지만 어쩌면 음수 여백이 낮은 쪽이 P 요소로 인해 보이지 않게됩니다.

Answer 2

도트가있는 ASCII 아트로 정상적으로 처리 되더라도 실제로 텍스트가 아닌 그래픽입니다. 따라서, 반복되는 배경 이미지가 트릭을 적절하게 수행 할 수 있습니까?

Answer 3

가능하지만 잘 지원되지 않습니다. :after 가짜 선택기와 content 규칙이 필요합니다. 여기를보십시오 : http://www.quirksmode.org/css/beforeafter.html IE는 구현을 위해 큰 F를 얻습니다.

당신은 자바 스크립트에서 할 수 있습니다. 또는 경계 유형 '점선'을 독창적으로 사용합니다. 또는 반복되는 배경을 Brooks가 제시 한 것처럼 가격 및 설명을 제공함으로써 배경색을 적용 할 수 있습니다.

업데이트 그처럼 보일 수 있습니다 무엇 :

이

<ul> 
    <li><p class="food">Chinese Food</p><p class="price">$5.99</p></li> 
</ul> 

다음 CSS가 일치 (검증되지 않은 :

이

.menu { list-style-type:none;margin: 0 0 0; padding: 0 10px 0; } 
.menu li { 
    display:block; 
    overflow:hidden; //contain the float 
    background-image: url(dots.gif); 
    background-repeat:repeat-x; 
} 
.menu .name { background-color:#ffffff; } 
.menu .price { float:right; clear:none; background-color:#ffffff; } 

Answer 4

Alex의 답변에는 큰 단점이 있습니다. .food 숨기기 하단 줄에 여러 줄 문자가 있습니다. 약간의 수정 된 솔루션의 라이브 데모 http://www.search-this.com/2007/11/26/css-a-recipe-for-success/ (demo)

다음

이다 (크기를 조정하려고) : http://cssdesk.com/BqR96

그리고 수정 CSS :

.restaurant_menu__list {  
    min-width: 320px; /* For mobile devices */ 
    max-width: 500px; /* Custom max width for readbility */ 
} 

.restaurant_menu__row { 
    border-bottom: 2px dotted #B5ABAB; /* Our dotted line, we can use border-image instead */ 
    position: relative; 
    float: left; 
    line-height: 1.2em; 

    margin: -.9em 0 0 0; 
    width: 100%; 

    text-align: left; 
} 

.restaurant_menu__meal span 
, .restaurant_menu__price 
{ 
    background-color: #FFF; /* For .restaurant_menu__row background rewriting */ 
} 

.restaurant_menu__meal { 
    padding-right: 3em; /* Custom number for space between text and right side of .restaurant_menu__row; must be greater than .restaurant_menu__price max-width to avoid overlapping */ 
} 

.restaurant_menu__meal span { 
    margin:0; 
    position:relative; 
    top: 1.6em; 
    padding-right:5px; /* Custom number for space between text and dotted line */ 
} 

.restaurant_menu__price { 
    padding:1px 0 1px 5px; 
    position:relative; 
    top:.4em; 
    left:1px;/* ie6 rounding error*/ 
    float:right; 
} 

또한 좋은 오래된 응답이

및 수정 된 html :

<ul class="restaurant_menu__list"> 

    <li class="restaurant_menu__row"> 
    <!-- Inside div we need inline element, to handle multiline meals --> 
    <div class="restaurant_menu__meal"><span>Crab Cakes with corn, roasted red pepper, and ginger vinaigrette</span></div> 
    <span class="restaurant_menu__price">€25</span> 
    </li> 

    <li class="restaurant_menu__row"> 
    <div class="restaurant_menu__meal"><span>French Onion Soup</span></div> 
    <span class="restaurant_menu__price">€32</span> 
    </li> 

</ul>