सीएसएस के साथ उलटा इंडेंटेशन निकालना

154

जब मेरी सूची में लंबी रेखाएँ चारों ओर लिपटी हों, तो मैं अपनी अप्रतिबंधित सूची से इंडेंट निकाल नहीं सकता। यहाँ मेरी सूची क्या दिखती है:

विंडोज उपयोगकर्ता पोटीन का उपयोग कर सकते हैं
Mac उपयोगकर्ता Terminal.app का उपयोग कर सकते हैं
लिनक्स उपयोगकर्ता SSH userid@ourserver.com पोर्ट 22 का उपयोग कर सकते हैं
...........> या साइबरडक जैसे एसएफटीपी प्रोग्राम का उपयोग करें .......................... ..............> ourserver.com, पोर्ट 22

(बिंदु संकेत दर्शाते हैं)

मैंने समाधानों का एक गुच्छा पढ़ा है और पाठ-इंडेंट, सूची-शैली का उपयोग करते हुए मार्जिन और पैडिंग को शून्य करने की कोशिश की है, लेकिन कुछ भी काम नहीं करता है। मुझे लगता है कि समस्या यह है कि सूची के ऊपर एक शीर्षक है जिसे मुझे केंद्रित करने की आवश्यकता है और इसलिए मैं मार्जिन को ऑटो पर सेट कर रहा हूं और फिर यह नीचे दी गई सूची को गड़बड़ कर रहा है। लेकिन यहां तक कि अगर मैं कहते हैं कि माता पिता के अंदर दो div यह काम नहीं करता है div।

यहाँ HTML / CSS है (मैंने सब कुछ शामिल किया है कि कुछ सेटिंग है जो अन्य सभी समाधानों को विफल करने का कारण बन रही है)

<div id="info">
    <p><strong>Did you know you can SSH directly to ourserver.com?</strong> </p> 
    <ul>
        <li>Windows users can use putty</li>
        <li>Mac users can use the <a href="http://www.terminfo.org">Terminal.app</a></li>
        <li>Linux users can use SSH userid@ourserver.com port 22</li>
        <li>Or use an SFTP program like <a href="http://cyberduck.ch/">Cyberduck</a> just point it at ourserver.com, port 22</li>
    </ul>
</div>

#info {
    color:#FFFFFF;
    width:440px;
    margin-left:auto;
    margin-right:auto;
    border-radius: 10px;
    border-style:solid;
    border-width:2px;
    border-color:#FFF; 
    padding-bottom:20px; padding-left:20px; padding-right:20px;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333333), to(#cccccc));
    overflow: hidden;
}
#info ul li { 
    float:left;
}

html css html-lists

— solerous
स्रोत

मैंने इसे एक बेला में डाल दिया ... यह मुझे सही लगता है jsfiddle.net/qeqtK

— tedski

जो इसे देखना चाहते हैं, उनके लिए jsfiddle ... या बस टेडस्की लिंक का उपयोग करें;)

आह, लेकिन तुम्हारा "सामान्यीकृत सीएसएस" चेक किया गया है, जो वह नहीं है जो आप आमतौर पर देखते हैं :)

— tedski

391

यह कोड इंडेंटेशन और सूची गोलियों को हटा देगा।

ul {
    padding: 0;
    list-style-type: none;
}

http://jsfiddle.net/qeqtK/2/

— जैक
स्रोत

1

जवाब देने के लिए धन्यवाद। मुझे अब समस्या का पता चला। मैं उपयोग कर रहा था: शरीर {पाठ-संरेखित करें: केंद्र;}

— सॉल्यूशन

9

-webkit-padding-start: 0;

वेबकिट इंजन द्वारा जोड़े गए पैडिंग को हटा देगा

— pleerock
स्रोत

0

इसे यहां से हटाएं #info:

    margin-left:auto;

इसे अपने हेडर के लिए जोड़ें:

#info p {
    text-align: center;
}

क्या आपको निश्चित चौड़ाई आदि की आवश्यकता है? मैंने अपनी राय में आवश्यक सामान नहीं हटाया और हेडर को केंद्रित किया text-align।

नमूना
http://jsfiddle.net/Vc8CB/

— Smamatti
स्रोत