CODEWITHSUNDEEP
jqueryhtmlcss
Abrar Ahamed
Abrar Ahamed

Reputation: 199

How to display li items horizontally with same spacing and align neatly

I have li items how to display horizontally or format neatly

below is my html

<!doctype html>
<html lang="en" ng-app="app">

<head>
<meta charset="utf-8">
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="script.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
    integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
    crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script
    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous"></script>
<style>
body {
    padding-top: 70px;
    /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}

strong {
    cursor: pointer;
}
</style>
</head>

<body>

    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span> <span
                        class="icon-bar"></span> <span class="icon-bar"></span> <span
                        class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Start Bootstrap</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse"
                id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#">About</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>
    <div class="container">

        <div class="row">
            <div class="col-lg-12 text-center">
                <h1>RSC Acquirer Agent Messages</h1>

            </div>
        </div>
        <!-- /.row -->

    </div>

    <div ng-controller="ExampleController">
        <ul class="list-unstyled" class="list-group">
            <li ng-repeat="t in data.transactions">
                <ul class="list-unstyled" style="border: none">
                    <li ng-repeat="(key, value) in t" ng-if="key!='__opened'"
                        class="list-group" style="border: none"><span
                        class="glyphicon glyphicon-plus-sign"></span> <strong
                        ng-click="t.__opened=!t.__opened">{{key}} </strong>
                        <ul ng-if="t.__opened" class="list-unstyled">
                            <li><strong
                                ng-click="value.request.__opened=!value.request.__opened"
                                class="list-group-item list-group-item-info"
                                style="border: none"> <span
                                    class="glyphicon glyphicon-plus-sign"></span>Request
                            </strong>
                                <ul ng-if="value.request.__opened" class="list-unstyled">
                                    **<li ng-repeat="re in value.request""list-group-item">

                                        {{re.Field}} {{re.length}} {{re.value}}</li>**
                                </ul></li>
                            <li><strong
                                ng-click="value.response.__opened=!value.response.__opened"
                                class="list-group-item list-group-item-info"
                                style="border: none"><span
                                    class="glyphicon glyphicon-plus-sign"></span>Response</strong>
                                <ul ng-if="value.response.__opened" class="list-unstyled"
                                    class="list-group-item">
                                    <li ng-repeat="re in value.response""list-group-item" >
                                        {{re.Field}} {{re.length}} {{re.value}}</li>
                                </ul></li>
                        </ul></li>
                </ul>
            </li>
        </ul>
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.js"
        integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
        crossorigin="anonymous"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="bootstrap/js/bootstrap.min.js"></script>

</body>
</html>

the li and the result are as below 

  **<li ng-repeat="re in value.request""list-group-item">

                                        {{re.Field}} {{re.length}} {{re.value}}</li>**
                                </ul></li>

DE-000 004 0110
DE-001 008 00110010 00111010 00000000 00000000 00001110 11000001 10000000 00000010 
DE-003 006 003000
DE-004 012 000000004100
DE-007 010 0807063032
DE-011 006 010424
DE-012 006 163032
DE-013 004 0807
DE-015 004 0719
DE-037 012 321916010424

I want to format so the display is properly aligned like below so each field can be separated and nicely display.

DE-000      004        0110
DE-001      008        00110010 00111010 00000000 00000000 00001110 11000001                          
                       10000000 00000010 
DE-003      006        003000

How can I achieve this I tried to use table to format but for each loop the columns are not aligned properly. Instead of displaying in table prefer without table.

Upvotes: 1

Views: 582

Answers (3)

WahhabB
WahhabB

Reputation: 520

Since you don't know in advance the maximum width of an element, a table is actually the correct way to do this. Tables are designed to display tabular data, and that is in fact what you have. I don't know why you had problems, but using the modern display characteristics gives you full control over your table display.

Let's say that rather than using conventional table markup, you use the following. (I don't use Angular, so my syntax may not be correct)

<div id=fields>
**<p ng-repeat="re in value.request""list-group-item">

     <span>{{re.Field}}</span>
     <span>{{re.length}}</span>
     <span>{{re.value}}</span></p>**
</div>

Now try the following CSS:

    #fields {
        display: table;
        width:100%;
    }
    #fields p {
        display: table-row;
    }
    #fields p span {
        display: table-cell;
        margin-right: 20px;
    }

You can modify as needed to change the space distribution of the columns.

Upvotes: 0

Giulio Bambini
Giulio Bambini

Reputation: 4755

You can simply do it like this:

.list-unstyled{
  list-style: none;
}
.list-unstyled li span{
  display: inline-block;
  margin-right: 40px;
}
.list-unstyled li span:last-child{
  margin-right: 0;
}
<ul class="list-unstyled">

  <li>
    <span>DE-000</span>
    <span>004</span>
    <span>0110</span>
  </li>
  
  <li>
    <span>DE-000</span>
    <span>004</span>
    <span>0110</span>
  </li>
  
  <li>
    <span>DE-000</span>
    <span>004</span>
    <span>0110</span>
  </li>
  
  <li>
    <span>DE-000</span>
    <span>004</span>
    <span>0110</span>
  </li>

</ul>

Upvotes: 2

men3m
men3m

Reputation: 231

use this css style

li{margin-right: 30px;}

Upvotes: 0

Related Questions